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

Telerik theme with Scss missing browser prefixes

8 Answers 45 Views
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Veteran
Dan asked on 17 Jul 2018, 07:29 AM

I have an application that uses the SCSS telerik theme

/*Bootstrap v4 custom variables*/
@import "lib_overwrite/bootstrap_variables_overwirte";
 
/*Kendo UI custom variables*/
@import "lib_overwrite/sbkvariables";
 
/*Keno UI - Bootstrap v4 theme*/
@import "../../../node_modules/@progress/kendo-theme-bootstrap/scss/all";
 
/*Original Bootstrap v4 reboot*/
@import "../../../node_modules/bootstrap/scss/bootstrap-reboot";
 
/*Original Bootstrap v4*/
@import "../../../node_modules/bootstrap/scss/bootstrap";
 
/*Custom sass*/
@import "main";

but the resulting css does not contain the browser prefix styles. I have found this because on IE 11 the filter grid row contains the input fields but they do not have the same width as the column. But If I add the "-ms-flex 1 1 0px" that exist on the telerik site the input fields have the correct width.

How can the browser prefix be generated using SCSS for the telerik?

8 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 19 Jul 2018, 02:05 PM
Hi,

We are not aware of such issue with the existing SCSS files - the issue may be caused by some configuration setting while compiling the CSS. Would you please elaborate a little bit this is done so we could investigate deeper the issue?

Regards,
Plamen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Veteran
answered on 19 Jul 2018, 02:08 PM

Hi Plamen,

I am new to SCSS and I assume that Visual studio compiles the SCSS and generates the CSS file. Please let me know where should I look to see the configuration settings for compilation

0
Plamen
Telerik team
answered on 24 Jul 2018, 10:23 AM
Hi,

In such case I would rather search for the exact bundling configuration of the project instead of the Visual Studio. In ASP .NET Core you can refer to this help topic where a deep information about Less and Sass processing is provided. From then on you can check the exact GULP task that is taking care of this and look for the different setting that could be set.

Hope this information will be helpful.

Regards,
Plamen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Veteran
answered on 25 Jul 2018, 09:05 AM

Hi Plamen,

Could you provide a simple application where using the SCSS file the browser prefix is generated. Also I should mention that my project has no GULP task.

Also you said "In ASP .NET Core you can refer to this help topic" but you have not provided a link or what exactly "this" refers to.

0
Plamen
Telerik team
answered on 27 Jul 2018, 11:39 AM
Hi,

Please excuse me for missing the link for the article - I meant this article - https://docs.microsoft.com/en-us/aspnet/core/client-side/less-sass-fa?view=aspnetcore-2.1.

One possible way to add the styles with the prefixes it to import directly the CSS as it is shown below:
@import "../../../node_modules/@progress/kendo-theme-bootstrap/dist/all"

Meanwhile since we don't have a ready solution that provided the stiles with all the prefixes, I will need some time to prepare one and share it here. Please excuse me the delay in advance.

Regards,
Plamen
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
Accepted
Plamen
Telerik team
answered on 02 Aug 2018, 10:51 AM
Hello,

In order to customize the CSS that is generated from the Kendo SCSS theme we need to create some task and use the autoprefixer. One way to achieve it is by using gulp. I am attaching a sample project where a similar behavior is used to generate a custom CSS in a similar way as in the Core article that I linked before.
 
Hope this information will be helpful.

Regards,
Plamen
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
Dan
Top achievements
Rank 1
Veteran
answered on 02 Aug 2018, 11:44 AM

Hi Plamen,

Thank you for the project. Also what I wanted was this phrase "use the autoprefixer". I needed to know if you are using a package or had define your own package because I looked at how to do this and they were too many to choose and some of them were not free.

0
Plamen
Telerik team
answered on 03 Aug 2018, 07:33 AM
Hi,

In the example I used gulp-autoprefixer that is a thin layer over the autoprefixer both of them under MIT license.

Regards,
Plamen
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.
Asked by
Dan
Top achievements
Rank 1
Veteran
Answers by
Plamen
Telerik team
Dan
Top achievements
Rank 1
Veteran
Share this question
or