Scss duplicate calc function

3 posts, 1 answers
  1. Dan
    Dan avatar
    197 posts
    Member since:
    Nov 2017

    Posted 29 Jan 2019 Link to this post


    I have used the telerik theme with Scss but today I found a problem with the autocomplete. After the file is compiled the generated class is

    .k-autocomplete {
      padding-right: calc( calc( 0.75rem + 17px)); }
      .k-rtl .k-autocomplete, .k-autocomplete[dir="rtl"] {
        padding-left: calc( calc( 0.75rem + 17px));
        padding-right: 0; }

    This is not the only class that generates this. The above is not a valid use of calc function in IE


  2. Answer
    Preslav avatar
    591 posts

    Posted 01 Feb 2019 Link to this post

    Hello Dan,

    Based on your post, I assume that you are compiling the themes locally. Please correct me if I am wrong.

    Generally speaking, our builds are depending on the PostCSS Calc package:
    The easiest way to successfully build the themes is to install the Kendo UI Theme Tasks: and build the desired theme via its API.

    Also, you could clone our repo: locally and build the themes there by following these steps:

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

    Posted 01 Feb 2019 in reply to Preslav Link to this post

    Hi Preslav,

    Indeed we are compiling the theme locally because we are using a custom theme.

    After applying the PostCSS Calc package it worked correctly.

    Thank you for the link to the KendoUI Theme Tasks it was helpful to see what PostCSS tasks are applied.

Back to Top