Telerik theme with Scss missing browser prefixes

[Dan]

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?

[Plamen]

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

[Dan]

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

[Plamen]

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

[Dan]

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.

[Plamen]

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

[Plamen]

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

[Dan]

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.

[Plamen]

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