I've just started a project using the R3 2019 version of Kendo UI for MVC, with the bootstrap v4 theme.

I've got a grid inside a bootstrap card, but setting the font style on the div that contains the grid, doesn't affect the grid font-size, where it has using past framework version using the original bootstrap theme.

What's the easiest way to reduce a specific grids font size on a page?

Thanks

Hi Andrew,

The Kendo Grid wrapper automatically appends an id to the Grid with a value the name you have set for the Grid:

@(Html.Kendo().Grid<Student>()
     .Name("grid"))

And so you could target the grid with its id:

#grid {
    font-size: 10px;
}

You could also target the Grid more precisely with:

html, body, #body, #grid div .k-grid {
    font-size: 10px;
}

I hope this helps and please contact us back in case of further questions.

Regards,
Nikolay
Progress Telerik

Thanks - this has worked. However, where I have a sub-grid, I have to set the style on .k-grid , which is fine for the page I'm working on, but not if I want two grids with sub-grids on a page, with differing font sizes.

The previous behaviour of inheriting from the parent div worked well - why does this not work now? Is it version 2019 R3, or the bootstrap v4 theme?

Hi Andrew,

My name is Tsvetomir and I am stepping in for my colleague Nikolay who is currently away. And, I would like to apologize for the delay in my response.

Generally, when there are two grids, they are supposed to have different id attributes. Therefore, if you would like to style only one of them, you would have to make use of the so-called CSS specificity to target the contents of only one of them. Here is an example:

    <style>
      #grid, #grid .k-grid{
        font-size: 20px;
      }
    </style>

As per the inherited style, I tested out the scenario with the bootstrap v4 theme and it appears that it does not make a difference between the versions. Can you specify to which version you refer to? 

Actually, the grid does inherit its styles but only if the html {  // ... } rule is specified, for instance:

<style>
     html { 
          font-size: 14px;
          font-family: Arial, Helvetica, sans-serif; 
     }
</style>

And those styles would be applied for the whole page.

Feel free to contact us back in case further assistance is required.

Best regards,
Tsvetomir
Progress Telerik

Nice thread-I'll be using this!  

Thanks Tsvetomir!

Taffy