Hi team,
I am in the process of changing my theme from less to sass. Since ever, I use the less default theme with some customizations, and I want to replace it with the sass classic main theme which is said to be its sass couterpart.
First, let me say that there are too many differences to state they are siblings!
In less theme, a widget has not a fixed font size and gently inherit from the body. In the sass theme, every widget has a font size of 14px. Why ? This is a big issue for me as kendo widgets must fit into a page whose font size is 13 by default but can be changed.
2 questions:
- is there a way to set default font-size to 13px for all widgets?
- do kendo widgets are able to gently take any font size? I mean without looking ugly.
thanx
Laurent.
1 Answer, 1 is accepted
Hello Laurent,
Thank you for the provided feedback. The feedback from our customers is very important and valuable for us.
To change the font-size in the widgets you will need to use classes such as k-grid, .k-combobox, .k-input-inner, etc. Below is an example.
<style>
.k-grid, .k-combobox, .k-scheduler, .k-button{
font-size: 18px;
}
</style>Here is also a small Dojo example demonstrating the above.
Regarding the second question, If you need to change the font size to 13px the appearance of the widgets should not be changed a lot, and this should not lead to any issues in the appearance, however, if the font size is changed to extremely large or small then other customizations to the appearance of the widget might be needed. In case you need assistance in customizing the appearance of a specific widget after setting large or small font sizes, please let me know.
Let me know in case you have an additional question on the matter.
Regards,
Neli
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/.
Rank 2
Iron
Iron
Hi Neli,
Thank you for the prompt response.
To change the widgets' font size I can use the $font-size variable in SASS stylesheet, right. What disappoint me is the fact that a widget cannot inherit its font size from the body, like it was the case with the LESS stylesheet.
Regards,
Laurent.
Hi Laurent,
Indeed, you can use the $font-size variable for setting the base font-size of the components.
Another possibility is a style as in the exmaple below:
[class^="k-"] {
font-size: 30px;
}You can also check if the Sass Bootstrap theme will be suitable for your scenario as in the Bootstrap theme rem units are used.
Regards,
Neli
Rank 2
Iron
Iron
Hi Neli,
Thank you for the Sass Bootstrap theme idea, will have a look at that.
Best reagards,
Laurent.
Rank 2
Iron
Iron
Hi Laurent,
You are correct. Even in the Bootstrap theme not all of the widgets are using rems. Please excuse me for misleading you. You could set the font-size as mentioned in my previous reply.
As indeed it will be good if the widgets can inherit the font-size from the body I will forward your feedback to the frontend theme.
Let me know in case you have additional questions.
Regards,
Neli
Rank 2
Iron
Iron
Veteran
Hi.
I upgraded from Bootstrap v3 LESS (Kendo UI v2022.3.1109) to Bootstrap v3 SASS (Kendo UI v2023.1.314) (replaced "kendo.common-bootstrap.min.css" and "kendo.bootstrap.min.css" with the prebuilt "bootstrap-3.css") and had a similar issue with font-size on widgets. In my case, the font on the widgets was very small.
I solved the problem by adding the following CSS to the scss file that is included on all pages:
:root {
font-size: 14px;
}
I got the clue here: https://www.w3docs.com/snippets/css/which-is-better-to-use-in-css-px-em-or-rem.html
/Morten