This is a migrated thread and some comments may be shown as answers.
Reduce Grid Font Size
4 Answers 104 Views
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
AP asked on 24 Sep 2019, 02:07 PM

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

4 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 26 Sep 2019, 01:26 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
AP
Top achievements
Rank 1
answered on 26 Sep 2019, 01:39 PM

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?

 

0
Tsvetomir
Telerik team
answered on 01 Oct 2019, 05:51 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Taffy Lewis
Top achievements
Rank 1
answered on 25 Oct 2019, 11:51 AM

Nice thread-I'll be using this!  

Thanks Tsvetomir!

Taffy

Tags
Grid
Asked by
AP
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
AP
Top achievements
Rank 1
Tsvetomir
Telerik team
Taffy Lewis
Top achievements
Rank 1
Share this question
or