I'm importing a css file in a component but the css is not applied
import React, {useState} from 'react';
import "./styles.css"
function Category(props) {
return (
<>
<table>
<thead>
<tr className="grey-thead">
<th>CATEGORY</th>
<th>DESCRIPTION</th>
<th>RESULTS</th>
</tr>
</thead>
<tbody>
and this is styles.css
.grey-thead{
background-color: grey;
}
this code is on a symfony project using encore
Please use the following css:
.grey-thead th{
background-color: grey;
}
Related
My problem: https://i.gyazo.com/152caf74df3c484e770f9e8c34f5471e.mp4
If I click on the button, then it causes an overflow. I want to menu to appear without the overflow.
Sandbox: https://stackblitz.com/edit/react-ts-8aq1rq?file=App.tsx,index.html
Code:
import * as React from 'react';
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavDropdown, Button } from 'react-bootstrap';
// #ts-nocheck
export default function App() {
return (
<div className="table-responsive">
<div className="table">
<table
id="user-list-table"
className="table table-striped"
role="grid"
data-toggle="data-table"
>
<thead>
<tr className="light">
<th>Col one</th>
<th>Col two</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>
<NavDropdown
id="basic-nav-dropdown"
title={
<Button className="btn btn-sm btn-icon" variant="primary">
click
</Button>
}
>
<NavDropdown.Item>Option 1</NavDropdown.Item>
<NavDropdown.Item>Option 2</NavDropdown.Item>
<NavDropdown.Item>Option 3</NavDropdown.Item>
</NavDropdown>
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
Is there another bootstrap component that does this so that I can swap NavDropdown to it? If not, is there something else like a CSS hack that lets me do this?
The issue is that there isn't enough room to dropdown the nav list inside the div with the class of table-responsive. You can give it some min height or padding, but that might be weird if you have content below it. So you can add a negative margin to counter the additional padding:
.table-responsive {
padding-bottom: 100px;
margin-bottom: -100px;
}
Demo
Trying to alternate row colors in my tailwindcss styled page, the code below has no effect on my <tr>s:
<style>
tr:nth-child(even) {
class="bg-gray-50";
}
tr:nth-child(od) {
class="bg-white";
}
</style>
What am I missing out please?
As stefan.at.wpf mentioned you should extend your tailwind config like so:
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
backgroundColor: ['even'],
}
},
}
Then you can use even in your classes in like so:
<tr class="even:bg-grey">
The Tailwindish way would be to use even:someclassor odd:someclass. Needs to be enabled first, see details here
It seems to me that you are mixing CSS styles and HTML classes. You have to go for one or the other. Assuming that .bg-gray-50 corresponds to #ccc, you could apply the styles as follows:
<style>
tr:nth-child(even) {
background-color: #ccc;
}
tr:nth-child(od) {
background-color: #fff;
}
</style>
Add even and odd prefixes to your class list
<tbody>
<tr class="even:bg-gray-50 odd:bg-white"></tr>
</tbody>
See First, last, odd, and even from their documentation
You are trying to set kind of css classes into css tags.
Plus I advice you to set border-collapse: collpase; to your table, this way, you won't have the separation between your cells.
You must set css directly like below demo:
table{
border-collapse: collapse;
}
tr:nth-child(even) {
/*class="bg-gray-50";*/
background: gray;
}
tr:nth-child(od) {
/* class="bg-white";*/
background: white;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
You can achieve this using #apply and then listing the tailwind classes you want applied to the element in question.
tr:nth-child(even) {
#apply bg-blue-50;
}
I'm working on an application in Angular 7 and Angular Material cdk 6. It's my first time with Angular Material.
I have to override the css of my columns. None of my tries have worked.
* HTML *
<mat-menu #myMenu>
<ng-template myContentMenu>
<table mat-table>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef >Date</th>
<td mat-cell *matCellDef="let item" >{{ item.date }}</td>
</ng-container>
</table>
</ng-template>
I don't know how to put padding, I've tried encapsulation: ViewEncapsulation.None in the .ts file and :
* CSS *
:host { /** With and without host */
th.mat-column-date, td.mat-column-date {
padding-left: 20px; /** With and without !important */
}
::ng-deep mat-menu th.mat-column-date,
::ng-deep mat-menu td.mat-column-date {
padding-left: 20px !important;
}}
I don't know how to proceed. Does somebody have an idea ?
Why dont you just add your own class to the desired element. For example, I have added "col-padding" class to the th element.
HTML
<th mat-header-cell *matHeaderCellDef class="col-padding">Date</th>
CSS
.col-padding {
padding-left: 20px;
}
I have a regular HTML table in my app with the following structure (the values are not important):
<table>
<tr>
<th>Header Row 1</th>
<th>Header Row 2</th>
</tr>
{Object.values(someArray).map((value, index) => {
return (
<tr>
<td>{value.1}</td>
<td>{value.2}</td>
<td>{value.3}</td>
</tr>
);
})}
</table>
I'm trying to solve the problem of having my .css rules being globally applied, as I want different tables to have different styling rules.
So I started to implement styled-components.
This is what I came up with
const CustomTable = styled.table`
&&& {
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td,
tr {
padding: 5px;
}
th {
text-align: left;
}
table {
width: 100%;
}
}
`;
Only the first grouping of rules seems to be applied to my table. So padding, text-align, and width doesn't seem to take effect. Is this a valid structure (grouping multiple elements that have multiple rules) or do I need to individually create styled-components for each table element (<td>, <td>, .. etc)?
If you want to add global styles you can usecreateGlobalStyle from styled-components and use it to inject global styles to your components.
import { createGlobalStyle } from "styled-components"
like this, I have updated #deve's code.Codesandboxlink
Let's say I have a component MyComponent whose view contains a table
<table>
<thead>
<tr>
<th class="col1">COL1</th>
<th class="col2">COL2</th>
<th class="col3">COL3</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#item of items">
<td class="col1">{{item.content1}}</td>
<td class="col2">{{item.content2}}</td>
<td class="col3">{{item.content3}}</td>
</tr>
</tbody>
</table>
I would like to MyComponent within different container (e.g. Container1 and Container2) and be able to define some attributes of the table (e.g. the width of each column) using the CSS files I can attach to the containers. For instance in Container1 I could define a CSS file like this
.col1 {
width: 40%;
}
.col2 {
width: 30%;
}
.col3 {
width: 30%;
}
while in Container2 I could have a different CSS file with different attributes.
Is this possible?
Thanks
You could leverage ngStyle and Input for example:
MyComponent would be:
#Component({
selector:'table-component',
template:`
<table>
<thead>
<tr>
<th [ngStyle]="col1css">COL1</th>
<th [ngStyle]="col2css">COL2</th>
<th [ngStyle]="col3css">COL3</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#item of items">
<td [ngStyle]="col1css">{{item.content1}}</td>
<td [ngStyle]="col2css">{{item.content2}}</td>
<td [ngStyle]="col3css">{{item.content3}}</td>
</tr>
</tbody>
</table>`
})
export class MyComponent{
#Input() col1Css;
#Input() col2Css;
#Input() col3Css;
}
And then in the containers:
#Component({
selector: 'container1',
directives:[MyComponent],
template: `<table-component [col2Css]="col2Css" [col3Css]="col3Css" [col1Css]="col1Css"></table-component>`
})
export class Container1 {
col1Css = {'width':'40%'};
col2Css = {'width':'30%'};
col3Css = {'width':'30%'};
}
Example in a plunker
If you have different .css files, you could leverage styleUrls in #Component decorator which can accept array of string. Please note that you can achieve your goal many ways and it has a broad scope so its hard to say particular way. But I feel like this can help you (don't know up to which extend). In plunker I'm using different stylesheets with different attributes as you said. Your question can have many answers.
http://plnkr.co/edit/RaJgtc?p=preview
#Component({
...
styleUrls: ['src/style.css','src/styleone.css'],
...
})
I suggest to first go with #Abdulrahman's approach and if you run into situations where you need more flexibility because you don't know in advance what should be able to be styled from the outside, you can use shadow-piercing CSS combinator >>>:
#Component({
selector: 'container1-cmp',
directives: [MyComponent],
template: `
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>`,
styles: [`
my-component >>> .col1 { width: 40%; }
my-component >>> .col2 { width: 30%; }
my-component >>> .col3 { width: 30%; }
`]
})
export class Container1Cmp {
}
#Component({
selector: 'container2-cmp',
directives: [MyComponent],
template: `
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>`,
styles: [`
my-component >>> .col1 { width: 10%; }
my-component >>> .col2 { width: 10%; }
my-component >>> .col3 { width: 50%; }
`]
})
export class Container2Cmp {
}