Sass issues in last version (2020.1.219)

[Syleps]

Hi,

We just installed version 2020.1.219 of Kendo ASP.NET MVC, 
and we downloaded the SASS sources via npm (npm install @progress/kendo-theme-default), 
and we have some issues

1) SCSS files are wrong, and don't want to "compile"

There are commas that remain at the end of the include. Ex :
.k-popup {
        @include fill(
            $popup-text,
            $popup-bg,
            $popup-border,
        );
    }

2) Some Sass rules are badly written which prevents specifying variables

Ex :
$checkbox-line-height: $checkbox-size + $checkbox-border-width !default;

Replace with

$checkbox-line-height: addtwo($checkbox-size, $checkbox-border-width) !default;

Idem with $checkbox-dash-width & $radio-line-height

3) Issues with grid page numbers

We display both the current page and all the pages. 
This line is missing in the SCSS file (line present in the "standard" CSS case) :

.k-pager-wrap .k-pager-numbers .k-current-page {
    display: none;
} 

And even by adding this rule we have strange behavior of the pages: 
the page numbers disappear but the space between the navigation arrows is present, 
which makes a "hole" between them. It is enough to slightly change the size of the window 
(and therefore of the grid) so that the figures appear. 
I had to add a .Responsive (false) for it to work properly.

4) Issues with grid header && FireFox

This problem was present before this new version, but I take this opportunity to report a problem concerning the calculation of the padding-right on the k-grid-header.
You should know that all our grids have scrollers (Virtual or Endless) 

In Firefox:
<div class = "k-grid-header" style = "padding-right: 0px;"
With Chrome:
<div class = "k-grid-header" style = "padding-right: 17px;"

This causes the header columns to be offset from the body columns

This is not systematic: it happens about 1 in 10 times.

I didn't find the reasons why it happened on some grids and not on others that seem similar

 

 

Regards

[Teya]

Hello,

Directly onto your questions:

1. Thank you for reporting this. At our end, we do not have compiling issues caused by the trailing comma, which is why we have missed it. However, I have opened an issue in our themes repository regarding the reported problem and you can follow its status here:

https://github.com/telerik/kendo-themes/issues/1385

2. Can you please elaborate more on the issue that you are facing here? How does this prevent you from specifying variables?

3. The following issue has already been reported, and you can read more information about it and follow its status here:

https://github.com/telerik/kendo-themes/issues/1349

https://github.com/telerik/kendo-themes/issues/1376

4. I am testing the Grid from our demo with virtual scrolling:

https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

But unfortunately, I am not able to replicate the reported issue. Do you have any custom styles or scripts that might be affecting it? Also, do you happen to load your Grids from hidden containers? Can you provide me with a sample project where you are able to reproduce the problem, even if it's not systematic.

I am looking forward to your reply!

 

Regards,
Teya
Progress Telerik

[Syleps]

Hi,

1) comma issues

For information, I use Visual Studio / web compiler

2) Variable spécification

In addition to the theme variables (color, ...), for responsive reasons, I specify certain variables in em or rem

Ex : $font-size: 1rem; $icon-size: 1rem;

So $font-size (in rem) + $border-size (in px) fail -> need use calc or add_two

(I need all my screens to be 250 "characters" wide, whatever the resolution in pixels)

3) pages number

OK

4) FF & grid header

It is really difficult for me to set up a manipulation because I don't master the Kendo UI part, but only ASP.MVC (C #)

Some informations :

- I used only grid<dynamic> , and not grid<model>

- With virtual scroller, my grid is in a splitter & style has height:100%

- We have no javascript code which modifies the header of the grid

 

I have attached an example page (with a single grid) generated with FireFox and with Chrome, with the associated screenshots. Maybe you will detect the problem by comparison ...

 

Regards

 

 

[Teya]

Hello,

Thank you for the further information on the variables calculation issue. I have logged it in our public repository here:

https://github.com/telerik/kendo-themes/issues/1395

Unfortunately, based on the provided rendered HTML, I am not able to determine what might be causing the problem with the Grid in Firefox. I have created a runnable example with a grid with a virtual scroller inside a splitter:

https://dojo.telerik.com/EdiBaLaX

But still, I am not able to reproduce such an issue in Firefox. Can you please test it as well on your end? Also, is your grid rendered once the page is loaded or no? I would appreciate it if you can provide me with a runnable MVC project of the Grid where the issue can be reproduced.

Finally, as a small token of gratitude for reporting the Kendo themes related issues, I have updated your Telerik points.

 

Regards,

Teya
Progress Telerik

[Syleps]

Hi,

 

for the last point, with the firefox problems, I modified the example that you provided me so that it resembles as much as possible the case that I meet (https://dojo.telerik.com/EdiBaLaX/4); but I can't reproduce the same behavior as in ASP.NET MVC.

With the example we always have the elevator, with the 17px on the header and a height calculated in k-grid-content :

<div id="grid-container">
  <div id="grid" style="border-width: 0;margin: 0;padding: 0;height: 100%;" data-role="grid" class="k-grid k-widget k-grid-display-block">

  <div class="k-grid-header" style="padding-right: 17px;">

  <div class="k-grid-content k-auto-scrollable" style="height: 35px;">

 

In my case, I have 2 different behaviors depending on whether I put the "grid-container" with heigth 100% or not:

With 100%, I have scroller but header have 0px , and a height calculated in k-grid-content :

 

<div id="WorkspaceNone-CURRENTFRAME-GRID-Container" style="height:100%">
  <div autofitcolumns="|" class="k-widget k-grid swat-grid k-grid-display-block k-reorderable " style="height:100%" data-role="grid" ...>

  <div class="k-grid-header" style="padding-right: 0px;">

  <div class="k-grid-content k-auto-scrollable" style="height: 198px;">

 

But without, scroller disappears with a padding-right=1px inside the header & content:

<div id="WorkspaceNone-CURRENTFRAME-GRID-Container">
  <div autofitcolumns="|" class="k-widget k-grid swat-grid k-grid-display-block k-reorderable" ...>

  <div class="k-grid-header" style="padding-right: 1px;">

  <div class="k-grid-content k-auto-scrollable" style="height: 100%; width: auto; overflow: hidden; padding-right: 1px;" data-role="virtualscrollable">

 

I can't find what attribute makes that in my case, only under FireFox, I don't have the same behavior.

For me, there is something in the javascript display of the grid which defines the paddint-right of the header & the height in the content which is based on a parameter that I cannot find.

One possible explanation would be dynamic content loading :

 @Html.Kendo().Splitter().Panes(tab =>
                   {
                       foreach (var v in Model.Items.OfType<UISplitterPage>().ToList())
                       {                         
                           tab.Add()                              
                               .LoadContentFrom(Url.Action("Render", "SplitterPage"))
                               .Size(v.Size)
                               .Scrollable(v.Scrollable)
                               .Collapsible(v.Collapsible)
                               .Collapsed(v.Collapsible && v.Collapsed);
                       }
                   })

 

I don't know how to do it in Kendo UI

Hopefully this can advance the resolution,

Regards

[Teya]

Hi Syleps,

I have created a sample MVC project with a Grid with virtual scrolling (attached here), but again, I am not able to reproduce the following two scenarios you are describing. I tried with both setting the grid container height to 100%, but with and without it the results seem to be the same. Can you please check the project and modify it in a way you reproduce the issue?

Also, one thing you can try is resizing the Grid once the splitter content has been loaded:

<script>
    function splitter_contentLoad(e) {
         var grid = $("#grid").data("kendoGrid");
          grid.resize();
     }

    var splitter = $("#splitter").data("kendoSplitter");
    splitter.bind("contentLoad", splitter_contentLoad);
</script>

 

Regards,
Teya
Progress Telerik

[Syleps]

Hi,

Thank you for providing me with a sample project, which allowed me to reproduce the problem.

Cf attached files (only part of the project due to the limitation to 2MB of attached files)

1st case: endless => Header/scroller offset on FireFox and not on Chrome/Edge/Opera

2nd case: virtualscroll => Invisible scroller  on FireFox and visible on Chrome/Edge/Opera

 

Regards

 

 

 

Essayez avec cette orthographe : décalage du header/scroll sur Firefox et pas sur chrome

 

 

58/5000

 

 

header / scroller offset on Firefox and not on chrome

[Teya]

Hello Syleps,

I reviewed your projects and it seems that the problem is coming from the fact that you are setting display: flex; flex-direction: column; to the body element with the following custom CSS:

body {
        margin: 0;
        border: 0;
        padding: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
 }

This style prevents the script from calculating the scrollbar width in Firefox. In more detail, what the script does to calculate the scroll width is add an empty container as a direct child of the body which is high enough that makes the body scroll. Once the body has a scroll, the width of this scroll is taken and the empty container is removed. However, the display: flex set to the body prevents the scrollbar from showing, and thus, the width of the scrollbar is calculated as 0 and this is what is set to padding-right of the grid header.

I would suggest removing the flex styles from the body, which generally is considered a bad practice, and adding it to the container that wraps the body.

Can you please give this a try and let me know how it works?

 

Regards,
Teya
Progress Telerik

[Syleps]

Hi,

 

It works. 

It was indeed a mistake to put the flex in the body. We always have a "main" wrapper div

Thank you.

Regards