Telerik theme with Scss missing browser prefixes

9 posts, 1 answers
  1. Dan
    Dan avatar
    169 posts
    Member since:
    Nov 2017

    Posted 17 Jul 2018 Link to this post

    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?

  2.
  3. Plamen
    Admin
    Plamen avatar
    3074 posts

    Posted 19 Jul 2018 Link to this post

    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.
  5. Dan
    Dan avatar
    169 posts
    Member since:
    Nov 2017

    Posted 19 Jul 2018 in reply to Plamen Link to this post

    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

  7. Plamen
    Admin
    Plamen avatar
    3074 posts

    Posted 24 Jul 2018 Link to this post

    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.
  9. Dan
    Dan avatar
    169 posts
    Member since:
    Nov 2017

    Posted 25 Jul 2018 in reply to Plamen Link to this post

    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.

  11. Plamen
    Admin
    Plamen avatar
    3074 posts

    Posted 27 Jul 2018 Link to this post

    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.
  13. Answer
    Plamen
    Admin
    Plamen avatar
    3074 posts

    Posted 02 Aug 2018 Link to this post

    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.
  14.
  15. Dan
    Dan avatar
    169 posts
    Member since:
    Nov 2017

    Posted 02 Aug 2018 in reply to Plamen Link to this post

    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.

  17. Plamen
    Admin
    Plamen avatar
    3074 posts

    Posted 03 Aug 2018 Link to this post

    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.
Back to Top