Reduce Grid Font Size

5 posts, 0 answers
  1. AP
    AP avatar
    256 posts
    Member since:
    Apr 2010

    Posted 24 Sep 2019 Link to this post

    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

  2. Nikolay
    Admin
    Nikolay  avatar
    259 posts

    Posted 26 Sep 2019 Link to this post

    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.
  3. AP
    AP avatar
    256 posts
    Member since:
    Apr 2010

    Posted 26 Sep 2019 in reply to Nikolay Link to this post

    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?

     

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 01 Oct 2019 Link to this post

    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.
  5. Taffy Lewis
    Taffy Lewis avatar
    10 posts
    Member since:
    Apr 2019

    Posted 25 Oct 2019 in reply to Tsvetomir Link to this post

    Nice thread-I'll be using this!  

    Thanks Tsvetomir!

    Taffy

Back to Top