DateTimePicker container does not adapt to font-size

[Omikai]

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.

[Stefan]

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

[Omikai]

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!

[Stefan]

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