Here is my fiddle:
https://jsfiddle.net/jemrfomy/
Once I click on a checkbox, it should change that particular tr's background color using the highlight class below:
.ui-table-highlight {
background-color:#ffefbb;
}
I tried several solutions on stackoverflow but I think it perhaps is a problem in my css?
Yes its a problem with the hierarchy of your highlight CSS class it should be:
.ui-table tr.ui-table-highlight {
background-color:#ffefbb;
}
As ".ui-table tr:nth-child" will override it otherwise
Just add !important after the color in your css as
.ui-table-highlight {
background-color:#ffefbb !important;
}
Updated your fiddle
https://jsfiddle.net/jemrfomy/1/
Best of luck for future :-)
Related
I need to change the default icon colour in Time pickers. but I don't know the way. If you can help me with this, It's really mean to me. Changes can see the below picture.
Use the class css-i4bv87-MuiSvgIcon-root:
.css-i4bv87-MuiSvgIcon-root{
color: red;
}
You can check this demo
I have applied css to my lightning Button to change the color of it. And I have class named Morning inside my button
.THIS.Morning{
//Mornig is class inside my button
color: red;
}
You might be good with the normal button variant, have you tried it? <lightning:button variant="destructive-text"/>
https://developer.salesforce.com/docs/component-library/bundle/lightning:button/example
You can use normal <button> and style it with Salesforce-defined classes + whatever else you need. Use Lightning Design System: https://www.lightningdesignsystem.com/components/buttons/
If it absolutely has to be a <lightning:button> and variant's aren't enough - look into button "styling hooks". More info:
https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/tokens_standard.htm
Please try this in your CSS :
.THIS .slds-button_brand {
color:red;
}
Which component i must use, to obtain a highlight in a row when the mouse is over a row, using the material-table component?
I dint find any property or which component override to obtain that.
Thanks in advace for your time
Best Regards
Here is the code https://codesandbox.io/s/yv13zjr9w9
you could create a css to highlight row
tr:hover{
background:gray;
}
Refer to sandbox
https://codesandbox.io/s/y686o6n9
If you want only this table to have an hover effect, wrap it in another element or give it a class as in the example above:
https://codesandbox.io/s/4wkpp98z69
.myTable tr:hover {
background-color: red;
}
I want to remove the .modal-backdrop class from my ionicModal but as the class is automatically added, I am unable to remove it.
I don't want to permanently remove the class. But want to remove it and then add later on.
I tried this:
angular.element(document.querySelector('div')).removeClass("modal-backdrop");
but it is not working.
Can you plz suggest how to do it?
Thanks in advance for any help.
One solution to hide the backdrop is changing the opacity of the backdrop modal when this is active! For that, put the following CSS Styles:
.active .modal-backdrop-bg {
opacity: 0;
}
My users are complaining that the change in color for md-buttons on focus is too subtle.
What is the right way to make an adjustment to this for the default color palettes?
Append: I am looking on how to adjust the button styling when the button has focus, not looking for how to create my own theme.
Also, I am using Angular-Material 1, NOT 2
OK, for anyone else looking for this, I found the answer in angular-material.modules.closure.button and angular-material.modules.js.button
.md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]):hover {
background-color: '{{primary-600}}'; }
.md-button.md-THEME_NAME-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-THEME_NAME-theme.md-primary.md-fab:not([disabled]).md-focused {
background-color: '{{primary-600}}'; }
This tells me what I needed, which is that focused buttons get primary-600.
NOW I can customized the theme palletes as recommended in the first comment