DateTimePicker container does not adapt to font-size

4 posts, 0 answers
  1. Omikai
    Omikai avatar
    5 posts
    Member since:
    Jun 2013

    Posted 05 Nov 2020 Link to this post

    Hi,

    I have the $font-size: .825rem set through my app but then the DateTimePicker looks shrinked. Seems like the calendar/time container-wrappers is not adapting to my font-size. When i change the $font-size to 1rem then it looks like i should as in your examples. 

    This is for bootstrap theme.

  2. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 06 Nov 2020 Link to this post

    Hello, Omikai,

    I applied the font-size of 0.825rem and this is how the DatePicker looks:

    https://stackblitz.com/edit/react-u64s8k?file=index.html

    Could please please share the CSS selector used to set that font-size?

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Omikai
    Omikai avatar
    5 posts
    Member since:
    Jun 2013

    Posted 10 Nov 2020 in reply to Stefan Link to this post

    Hi Stefan,

    This is for the DateTimePicker and the $font-size variable is set in scss. When i try the DateTimePicker in your example it looks like my attached file.

     

    Thank you!

  4. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 10 Nov 2020 Link to this post

    Hello, Omikai,

    After additional investigation, I was able to locate the issue.

    The Calendar cells calculation depend on two variable, the global font size, and the variable `$calendar-cell-size-px`. This is why only changing the global font-size creates smaller text and popup width, but the same cells widths.

    In this case, we have two options:

    1) Set the `$calendar-cell-size-px` variable to scale the same as the font size. For example, for font size 0.825 the `$calendar-cell-size-px` has to be 40 * 0.825.

    2) Set a global CSS that will apply this font size to all components and elements on the page. This will also require removing the scss variable font-size 0.825 as it will be set via the CSS:

    html {
     font-size: 0.825 rem
    }

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top