I want to style the individual rows of the data table based on some json values.
For example if a particular row has a temperature value of >30, I have to color that row as red. If it is between 30 to 50, the color should be green. Else the color should be green.
As of now I am only able to target the even rows or odd rows using:
tr:nth-child(even)/tr:nth-child(odd).
You should be able to add CSS classes directly to the row elements:
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
class="temperature-row"
[ngClass]="{'high': row.temperature > 30}">
</tr>
Then you can use the classes to style the rows as desired:
.temperature-row {
background-color: green;
}
.temperature-row.high {
background-color: red;
}
I like to style table rows using this pattern:
<tr *ngFor="let temperature of temperatures"
[ngClass]="{'green' : temperature.value == 10, 'orange' : temperature.value == 20, 'red' : temperature.value == 30}">
<td>{{temperature.value}}</td>
</tr>
And I define my colours, or any other styles, for those rows in CSS like this:
.red{
color: red;
}
.orange{
color: orange;
}
.green{
color: green;
}
Related
For my UI-Grid I've created conditional formatting with the following row template in the $scope.gridOptions object:
rowTemplate: '<div ng-class="{\'recruiter-row-active\':row.entity.activePositions!=0, ' +
'\'recruiter-row-passive\':(row.entity.activePositions==0 && row.entity.passivePositions !=0),' +
'\'recruiter-row-free\':(row.entity.activePositions==0 && row.entity.passivePositions==0)}">' +
'<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" ' +
'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>'
The classes look like this:
.ui-grid-row .recruiter-row-active {
background-color: #ff816b !important;
}
.ui-grid-row .recruiter-row-passive {
background-color: #fcff9d !important;
}
.ui-grid-row .recruiter-row-free {
background-color: #70cc79 !important;
}
The class for the html row in question is "ui-grid-row" and "ng-scope" and the parent element has class "ui-grid-canvas"
I was able to get my conditional formatting to work when I also implemented a
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
However I don't want to affect the other grids in my web app.
How would I get my conditional row formatting to override the default?
You can use scss and wrap your grid with a:
<div view="my-colors">
<!-- your grid element goes here -->
</div>
in the scss file, wrap the styling you want to affect only that view with:
[view="my-colors"] {
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
}
Suppose I want to change the standard white background color of the Select component to green.
My try...
<Select
style={{ backgroundColor: 'green' }}>
// Options...
</Select>
...didn't do it.
Can someone point me in the right direction?
[EDIT]
I ended up using the suggested approach from Jesper We.
Overwriting the color for all selections...
.ant-select-selection {
background-color: transparent;
}
...then I could style the Select components individually.
<Select> renders a whole set of <div>s, you need to take a look at the resulting HTML element tree to understand what you are doing. You can't do it through the style attribute, you need to do it in CSS.
The proper place to attach a background color is
.ant-select-selection {
background-color: green;
}
This will make all your selects green. Give them individual classNames if you want different colors for different selects.
For my form with Select element a have some code in render:
const stateTasksOptions =
this.tasksStore.filters.init.state.map(item =>
<Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
<span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
</Select.Option>
)
return (
....
<Select
mode="multiple"
value={this.tasksStore.filters.selected.state.map(d => d)}
onChange={this.handleTasksStatus}
optionLabelProp="title"
>
{stateTasksOptions}
</Select>
....
)
And some css for colorizing.
Result:
Try dropdownStyle instead of style.
<Select
dropdownStyle={{ backgroundColor: 'green' }}>
// Options...
</Select>
dropdownStyle is one of select props.
reference: antd select
From their official docs https://pro.ant.design/docs/style
Override the component style
Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.
Antd Select In multi-select state, the default will show all the select items, here we add a limit height for display scroll bar when the content beyond this height.
// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
ReactDOM.render(
<Select
mode="multiple"
style={{ width: 300 }}
placeholder="Please select"
className={styles.customSelect}
>
{children}
</Select>,
mountNode,
);
/* TestPage.less */
.customSelect {
:global {
.ant-select-selection {
max-height: 51px;
overflow: auto;
}
}
}
Two points need to be noted:
The imported antd component class name is not translated by CSS Modules, so the overridden class name .ant-select-selection must be put in :global.
Because of the previous note, the override is global. To avoid affecting other Select components, the setting needs to be wrapped by an extra classname to add range restriction
with all the above answers you cant change the styles of tags conditionally but with below approach you can.
You can do a hack and change the styles as you like of tags of select dropdown.
You can use dropdownRender of select which takes 2 arguments
menuNode
props
use props children property to reach to each tag and change the styles and you can conditionally change the styles as you like.
for reference below is the example link for code sandbox
Select Tags Styles Sanbox
May not be an efficient way to do it but you can use this for now to meet your business requirement.
Thanks
Somebody stated the selector to be
.ant-select-selection {...
However it should be selector as follows:
.ant-select-selector {
background-color: green;
}
They implemented this feature with v4 of ant design:
https://github.com/ant-design/ant-design/pull/21064
But beware before blindly upgrading from v3 -> v4 - a lot has changed:
https://github.com/ant-design/ant-design/issues/20661
menuItemSelectedIcon={(props) => {
return (mode == "multiple" ?
<Tooltip title="Check to confirm the apps alongwith the vendor">
<input type="checkbox" checked={props.isSelected}
style={{
margin: 5
}}
/>
</Tooltip>
: null)
}}
Lastly I was working on ant dropdown and it did not get style as I wanted and I did not find a good solution for that.
Then I decided to share my css solution for those who are in my situation:
.license-plate-letters {
overflow-y: hidden !important;
min-width: 240px !important;
.rc-virtual-list-holder>div {
height: auto !important;
}
.rc-virtual-list-holder-inner {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
flex-direction: row !important;
flex-wrap: wrap !important;
.ant-select-item-option {
padding: 0.5rem 12px !important;
&:hover {
background-color: #452380d2 !important;
color: white !important;
}
}
}
}
<Select
virtual={false}
popupClassName="license-plate-letters">
<Select.Option key={sth} Title="title">title</Select.Option>
</Select>
In angular, you can override the style with ng-deep
::ng-deep .ant-select-selector {
background-color: red;
}
How to change the color of a grid column in MVVM?
i would like something like this:
first column: green
second column: yellow
<div data-role="grid"
data-toolbar="DOC"
data-columns="[
{ 'field': 'doc1'},
{ 'field': 'doc2' }
]"
data-bind="source: sourceList"></div>
i would like to get something like this image:
You can add the following style to your CSS or page:
#grid th:nth-child(1) {
background: green;
}
#grid th:nth-child(2) {
background: yellow;
}
You'll need to set the selectors according to your setup.
I'm using ngx-bootstrap datepicker which has daypicker, monthpicker and yearpicker as inner component. I want to apply css to a table which is present inside daypicker.
<custom-datepicker>
<datepicker> //ngx-bootstrap datepicker component
<daypicker>
<table>
//rows, want to apply some css to only this table
</table>
</daypicker>
<monthpicker>
<table>
//rows
</table>
</monthpicker>
<yearpicker>
<table>
//rows
</table>
</yearpicker>
</datepicker>
</customdatepicker>
CustomDatePickerComponent.ts
#Component({
selector: 'custom-datepicker',
templateUrl: 'custom-datepicker-component.html',
styleUrls: ['custom-datepicker-component.scss'],
})
export class CustomDatePickerComponent {
}
custom-datepicker-component.html
<datepicker></datepicker>
custom-datepicker-component.scss
//I want to apply this css to a table which is inside daypicker. As of now it's applying to all the tables
table {
border: 1px solid lightgrey;
}
You can add a css class to your table:
<datepicker> //ngx-bootstrap datepicker component
<daypicker>
<table class="new-class">
//rows, want to apply some css to only this table
</table>
</daypicker>
...
and then use the regular class selector:
.new-class {
// your styling
}
Alternatively add a class to your datepicker or daypicker like so:
<datepicker class="new-class">
...
And use descendant selector:
.new-class table {
// your styling
}
it's as simple as this, using component name it's self we can apply css
custom-datepicker-component.scss
daypicker {
table {
border: 1px solid red;
}
}
You can try this :
datepicker > daypicker > table {
border: 1px solid lightgrey;
}
I have a list of tr elements and I want to add CSS on them with the following pattern :
red
red
red
black
black
black
red
red
red
black
etc.
How can I do this ? for now I've been using :
tr:nth-child(6n+1) { color: red; }
tr:nth-child(6n+2) { color: red; }
tr:nth-child(6n+3) { color: red; }
... but how can I do it with only 1 selector ?
EDIT : Here is a jsfiddle link https://jsfiddle.net/1s5s05vk/2/
I think it will work faster with using css.
.mytable tr:nth-child(6n+1), .mytable tr:nth-child(6n+2), .mytable tr:nth-child(6n+3) {
background-color: red;
}
But if you want, you could use javascript for this.
As I said before.. you could add a class like "red" to any element that has iterator%6 (iterator mod 6) lower than 4.
var rows = document.getElementsByTagName('tr');
for (var i = 0, len = rows.length; i < len; i++){
if(i%6 < 4) {
rows[i].classList.add("red");
}
}
try this. Maybe it can help you.
tr:nth-child(-n+3) {
background: red;
}
tr:nth-child(n+4) {
background: blue;
}
What you want to do cannot be done with a single selector using CSS alone.
However, you can shorten the definition so you don't repeat code:
tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
color: red;
}