Grouping Icon Color

[Joe]

I need just one simple thing.  I need to change the color from the barely visible half transparent close icon on grouping headers to actually be visible.  I have tried setting a multitude of classes to try and get this damn thing to show up.  I've actually ended up screwing up my entire grid just trying to find this one simple thing.  When oh when will you people make overriding these damn classes and styles easy.  ARGH!!!

Sorry about that, just a bit frustrated.  So what do I need to do to get this damn icon to show up?

[Stefan]

Hello, Joe,

I'm sorry to hear that overwriting the Kendo UI Grid styles is causing frustration.

In general, after the correct element is located using the inspector, there could be two reasons why the styles are not overwritten easily:

1) The selector has to be made more specific as an otherwise higher more specific selector will overwrite it.
2) There is a different CSS file which is changing the same element and that CSS file is loaded after the one in which the current changes are made.

As for the grouping icon I tested it and it this is the needed CSS selector:

.k-bare>.k-i-close{
   color: red
}

https://dojo.telerik.com/AJumUnUK

If this is not working on your end, please inspect the element and check which CSS rule from which file is currently setting the color of the "X" element.

Regards,
Stefan
Progress Telerik

[Joe]

Thank you, the selector you out in your response was the correct one.

To be fair, I did try the Inspect option in the browser.  Have you tried it yourself for this specific instance?  I ask because the selector you replied with doesn't show up at all when "inspecting" it, which is what causes me so much frustration.  See the screen shot for the Inspect screen when I tried.  Even with the new style applied, it still doesn't show up in that class listing when inspecting.

[Stefan]

Hello, Joe,

I'm glad to hear that the provided approach was useful.

As for the selector it is shown in the provided screenshot, the element with class ".k-bare" is the one focused. Then the "k-i-close" is inside the "a" element:



Inspecting the elements is the recommended approach as it provides details for the element when from where they are getting their styles.


Regards,
Stefan
Progress Telerik

[Joe]

I'm sorry, but I still don't see how you came up with the CSS selector of .k-bare>.k-i-close from what you see in that inspect screen.  To the right are the styles, none of which shows .k-bare with the .k-i-close, in the actual HTML, the class is k-button k-button-icon k-bar and the nested tag is k-icon k-i-close.  All of which I tried, but nothing worked until you gave me .k-bare>.k-i-close, and I just do not see how you came up with that.  So when inspecting tags, I should just (as I've been doing), trying different random classes that I see in the HTML and hope that I come up with the correct combination?  That's not very efficient.  As I said, I tried all sorts of combinations based on what I see in the class listing for styles as well as the HTML itself.

[Stefan]

Hello, Joe,

This is how I came up with this selector:

1) After inspecting the element I found that the "a" element has class "k-bare" it has the other two classes but they sound more generic and could affect other buttons.
2) Inside the "a" element there is an element with class "k-i-close".
3) In order to make the selector specific enough I used the ">" sign which is telling the application to apply the style only to elements with class "k-bare" that have direct children with class "k-i-close".

We do understand that this could lead to some trial and error approach, but the Kendo UI widgets have thousands of different elements and they have to be inspected individually. 

Regards,
Stefan
Progress Telerik