Can I get a link to the CSS grid sections?

[David]

     What I mean is, I recently had a question about making my grid column rows smaller. I used the css .k-grid tbody tr td {line-height:5px;}, but it wasn't working. After all my search, everything I tried from java functions, to changing the whole css sheet with anything that was "height" on it. So, I put a ticket in, and I was given this code to try. 

.k-grid .k-hierarchy-cell > .k-icon, .k-grid tbody tr td {line-height: 10px;padding: 0;margin: 0;}

WORKED! So, now I'm trying to find out where the information on .k-hierarchy-cell is located and the other parts of the code so I can do this myself. When I google it, I can't find like a API section of it or anything. Plus, what is with the > in the code? I know it means it's greater then the right side, but I want to find out different ways to use it, as well as the .k items. Is their a API section, or a HTML CSS section with this info? I haven't found it and would like to and find out what else I can do to spruce up my data grid. 

 

 

[Aleksandar]

Hi David,

There is no such comprehensive list of classes or an API for all the classes used for the Kendo widgets. Kendo UI widgets, however, use primitives. This means that different HTML elements in different widgets use the same CSS classes. This way a level of abstraction is achieved and also allows for common styling. You can review details on the common classes used in this section of the documentation:

https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#primitives

As the appearance of the components may depend on their state there are also common classes used to apply the respective styling:

https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#the-k-state-classes

For more detailed information I would suggest inspecting the DOM and the structure of the widget of interest and the classes applied to it. This way you will get the most detailed information on the HTML structure of the widget and CSS applied.

As fat as the ">" sign in CSS - that is a CSS selector. For example, the below CSS rule:

 

div > p {
  background-color: red;
}

 

would select and style every <p> element where the parent is a <div> element.

You can read more on CSS selectors and CSS specificity in the links below:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Regards,
Aleksandar
Progress Telerik