Reduce Grid Font Size

[AP]

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

[Nikolay]

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

[AP]

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?

 

[Tsvetomir]

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

[Taffy Lewis]

Nice thread-I'll be using this!  

Thanks Tsvetomir!

Taffy

[David]

Hi,

In Kendo UI v2023.1.314 grids now also have k-table and k-table-md classes applied to them. We had a global k-grid font-size css override in place which is now considered less important than the k-table-md font-size of 1rem. We have changed our override as follows:

.k-grid .k-table {
    font-size: 14px;
}

and this appears to work. Is this the recommended approach for overriding Grid font sizes globally in an MVC application using Kendo UI v2023.1.314?

Kind regards,

David

[Ivan Danchev]

Hi David,

Using the k-table class in the selector in version 2023.1.314 is correct. I would also add another selector that will ensure the font-size is applied to the buttons rendered in the Grid, for example buttons in the toolbar, or Edit/Destroy command buttons:

.k-grid .k-table,
.k-grid .k-button-md {
    font-size: 18px;
}

This is needed because the theme applies font-size explicitly to elements with the k-button-md class.

[David]

Thanks Ivan,

I noticed the selector you added is for k-button-md. Is the -md necessary, or can we just use for example:

.k-grid .k-table,
.k-grid .k-button {
    font-size: 14px;
}

Otherwise do we have to specify it for other breakpoints?

[Ivan Danchev]

David,

You can use the k-button.

md is added to target specifically medium sized buttons, which is the default size of the buttons. If you use k-button, you will target buttons of all sizes.