Handsontable overrides a cell's background color when the highlighting plugin is activated, as this image shows.
Is there a way to keep the background color when highlighting?
Example result
Without code it's a little hard to see what you're doing, but essentially, you will have to use the !important tag on your css rule. For example, if you had a rule on your td's that turned the background pink, you'd do the following:
td.pinkCell {
background-color:pink!important;
}
This will ensure the highlighting does not override your property.
.handsontable .currentRow {
background-color: rgba(225, 250, 255, 1);
}
.handsontable .currentCol {
background-color: rgba(225, 250, 255, 1);
}
The purpose was able to be accomplished in this. Thank you for an answer.
Related
I'm trying to understand how Vuetify's input color property is working and I can't find it in documentation, which simply states:
color
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
What I'm observing is that the color has effect only when the control has focus [LIVE DEMO], and goes back to default color when the control loses focus.
<v-text-field color="orange" label="label" />
Focused:
Not focused:
Is this by design, and is it specified anywhere?
Most importantly, how to affect the color of the not-focused state (preferably without custom CSS)?
To set the default color to v-text-field use the following css
-- #ff9800 (equivalenyt to orange color)
Working codepen is here https://codepen.io/chansv/pen/ZEEOXKN
.theme--light.v-text-field>.v-input__control>.v-input__slot:before {
border-color: #ff9800;
}
.theme--light.v-label {
color: #ff9800;
}
.theme--light.v-input:not(.v-input--is-disabled) input, .theme--light.v-input:not(.v-input--is-disabled) textarea {
color: #ff9800;
}
Github issue in vuetify https://github.com/vuetifyjs/vuetify/issues/3430
I have added filterable: true for kendo ui grid. The grid is getting filtered correctly.
What I want is when the filter icon is clicked the filter icon should be filled with some different color or may be the color should be changed for filter icon inidcating that the column filter icon is clicked.
Please tell how to this.
In my case the following css did it, easy and simple.
.k-grid-filter.k-state-active {
background-color: #d2691e;
}
Some of the themes do this, but at least the Metro one doesn't, if that's the one you're using too.
(with LESS)
.k-grid {
/* Also changes the group row background color */
.k-grouping-row > td {
background-color: #c5c5c5;
}
.k-grid-header {
.k-grid-filter.k-state-active {
background-color: #7ea700; /* Default metro active color */
/* White icon */
.k-icon.k-filter {
background-position: -48px -80px;
}
}
}
}
I grab the kendo.metro.less file, stick that (plus a few others) at the end.
This is supported out-of-the-box. Take a closer look at the demos when you filter change the theme if needed. Or modify the CSS of a particular theme to make it more clearly visible.
I've been having difficulty changing the active colour of an icon in my tabpanel item in Sencha Touch 2.2. I've tried lots of variations of CSS and SASS but have not managed to change it. The CSS I have tried:
.x-tabbar.x-docked-bottom .x-tab-active {
color: #000000;
background-color: #000000;
}
.x-tab-active {
background-color: #000000;
color: #000000;
}
I've also tried setting the active colour in SASS, but this doesn't seem to work either. The only bit of CSS that seems to have that blue in it is this bit:
.x-tabbar-light .x-tab-active .x-button-icon::before {
color: #1da2ff;
}
...but when I try setting that to black, nothing happens! Anyone have any ideas how I can change it??
EDIT: I tried the first suggestion changing the CSS to this:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #000000;
}
...but this is what I see:
Applying color: #1da2ff; to the :before pseudo-element is the right thing.
The reason why it doesn't work for you is that the rule get overridden by another one with a more specific selector:
.x-tabbar-dark.x-docked-bottom .x-tab-active .x-button-icon:before {
color: #50b7ff;
}
This is the exact situation where using !important is appropriate and not shameful:
.x-button-icon:before {
color: #1da2ff !important;
}
You have the right idea by selecting the icon, which is a span, and not the wrap, which is a div.
The div wrap .x-tab-active has a background color that decides the background of the active box. The icon has an image mask so background color or background-image gradient will determine the color of the icon. There is an additional span that wraps the text, like "x-button-label, for which a color style will change its color.
For changing the color of the icon try:
.x-tabbar-light .x-tab-active .x-button-icon {
background-color: #1da2ff;
}
Thanks a lot, it was enough to add this in my CSS:
.x-tabbar-light.x-docked-bottom .x-tab-active .x-button-icon:before {
color : #000;
}
There was no need to add !important for me as I was using the new base theme for ST 2.2, but your solution worked great!
:-)
Wonder if there is a way to change color for a label in Spark FormItem component. I tried this:
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|FormItem s|Label#labelDisplay {
color: #333333;
background-color: #FFFFFF;
font-size: 30;
}
and all of the styles work great, except the font color, which stays black for some reason. I would greatly appreciate any help resolving this.
See the answer from Peter DeHaan on my question "Do we need the equivalent of "labelStyleName" property for Spark FormItem class?" http://forums.adobe.com/thread/759374?tstart=0 "Because the color and fontWeight are declared in the default Spark FormItem skin, I believe you will have to create a custom skin if you want to override those styles."
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!