Calc-function in LESS-files

4 posts, 0 answers
  1. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 26 Sep Link to this post

    Hello,

    we are using one custom LESS-file to configure our kendo theme and get our generated, bundled result CSS file. This LESS-file is referencing the specific theme files (in our case 'office365') inside the kendo styles-folder. Unfortunately there are rules with the 'calc' function, that are specially handled by the LESS compiler. Its not pushing the default statement to the CSS file, but a self-calculated one.

     

    So this (kendo.common-office365.less - line 92):

    calc(1.143em + (2*@button-padding-y) + 2px)

    gets converted in the result CSS to this:

    calc(4.001em)

     

    And thats a wrong value, that shows me oversized buttons in the UI. To prevent this behaviour you should use the rule like this:

    ~'calc(1.143em + (2*@{button-padding-y}) + 2px)'

    which gets the following correct result in the CSS file:

    calc(1.143em + (2*.429em) + 2px)

  2. Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 29 Sep Link to this post

    Hi Jan,

    We have inspected the element and it works properly on our side. Could you please specify what is the theme and if there is some our online demo where the issue is reproduced?

    Regards,
    Magdalena
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jan
    Jan avatar
    37 posts
    Member since:
    Apr 2017

    Posted 29 Sep Link to this post

    We are using Visual Studio 2017 + LESS Compiler. Compiling the .less returns the wrong result as written in the first post. You will find more about this topic when googling "less calc problem".
  4. Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 29 Sep Link to this post

    Hello Jan,

    Thank you for pointing the issue. We have updated your Telerik points because of reporting a bug. We have logged it for fixing here, so you can follow the issue.

    Regards,
    Magdalena
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top