This is a migrated thread and some comments may be shown as answers.

DateTimePicker container does not adapt to font-size

3 Answers 1125 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Omikai
Top achievements
Rank 1
Veteran
Omikai asked on 05 Nov 2020, 10:09 AM

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.

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 06 Nov 2020, 02:47 PM

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/.

0
Omikai
Top achievements
Rank 1
Veteran
answered on 10 Nov 2020, 07:54 AM

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!

0
Stefan
Telerik team
answered on 10 Nov 2020, 10:24 AM

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/.

Tags
General Discussions
Asked by
Omikai
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Omikai
Top achievements
Rank 1
Veteran
Share this question
or