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

Sass themes issues

4 Answers 72 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Syleps
Top achievements
Rank 1
Veteran
Syleps asked on 05 Aug 2018, 08:44 AM

Hi,

I have some issues with sass themes.

My context : Asp.Net MVC & scss files from https://github.com/telerik/kendo-theme-default

 

1) IE11 & grid

There are positioning problems with the filter, column and refresh icons on the grid (cf themebuilder & filter icon on header).
One of them comes from the use of nested calc for the bottom property

 

2) IE11 & charts

When launching the themebuilder/asp.net  on IE11, the first time the charts don't display correctly.
If we change the theme via color swatch, they are OK.

 

3) Tabstrip color

When you put an item (Treeview, ...) in a tab, it takes the main color ($accent) instead of the text color ($text-color).

This is due to the class '.k-tabstrip .k-item' which must be replaced by '.k-tabstrip .k-tabstrip-items .k-item'

 

Regards

4 Answers, 1 is accepted

Sort by
0
Syleps
Top achievements
Rank 1
Veteran
answered on 05 Aug 2018, 09:41 AM
Correction : using scss from https://github.com/telerik/kendo-themes
0
Ivan Zhekov
Telerik team
answered on 08 Aug 2018, 07:11 AM
Hello.

Thank you for your report.

2) is a limitation of IE and we've tried numerous times to improve the said experience to no avail.
3) seem like a genuine bug and we'll fix that

I am not sure about 1). Do you think you could upload a screenshot, so I can see exactly what you mean?

Regards,
Ivan Zhekov
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.
0
Syleps
Top achievements
Rank 1
Veteran
answered on 08 Aug 2018, 08:33 AM

Hi,

 

For the 1), go to your site https://themebuilder.telerik.com/aspnet-mvc with IE11

you can see that the filter icon on the grid is shifted

This is due to the nesting of 2 calc for the bottom property :

bottom : calc( 8px + 0.71429em + (-1 * calc( 4px + 0.71429em) ))

And IE doesn't like that. He want :

bottom : calc( 8px + 0.71429em + (-1 * ( 4px + 0.71429em) ))

 

For 2) We use charts in our screens and it works even on IE, so ...

 

Regards

0
Ivan Zhekov
Telerik team
answered on 10 Aug 2018, 07:45 AM
Hi.

For themebuilder we use node-sass, where as for theme development (and publish) we use webpack with various loaders (autoprefixer, reduce calc etc). Due to the nature of the themes, at times we need to add variables and if those happen to be in different unit types, we'll use calc; it's also possible that the result of a given calculation is used elsewhere, hence the nested calc.

While the production files are passed trough the aforementioned reduce calc, the themebuilder does not use such postcss plugins and that's why you get the nested calc expressions. Still, if you use the variables file against a theme and compile it locally, you should get rid of the nested calc.

We'll look into adding postcss in the themebuilder as well. But for now using the variables files and compiling locally seems like the only option to get rid of the nested calc.

Regards,
Ivan Zhekov
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.
Tags
General Discussions
Asked by
Syleps
Top achievements
Rank 1
Veteran
Answers by
Syleps
Top achievements
Rank 1
Veteran
Ivan Zhekov
Telerik team
Share this question
or