Vertical scrollbar in grid with small amount of rows without fixed height (IE)

[Ron]

IE is showing a vertical scrollbar in grids with small amounts of rows without height being set. I edited the Grid Demo page "Initilization from table" as an example. The only thing I did in this example is remove the height definition of the grid and cut down the number of rows to 4. See:

http://dojo.telerik.com/EbIyI/2

It seems only to be happening on IE. Especially on older versions (<11) the scrollbar looks out of place and is quite annoying. 

[Dimo]

Hi Ron,

The scrollbar is actually visible in all browsers. I recommend reading the following documentation:

http://docs.telerik.com/kendo-ui/web/grid/appearance#remove-the-vertical-scrollbar

Regards,
Dimo
Telerik

[Ron]

The scrollbar is indeed visible in all browser BUT only in IE is the scrollbar 'active'. You can actually scroll 1 or 2 pixels in IE while this is not the case in other browsers. It looks like the grid content is just 1 or 2 pixels too high in IE. It has nothing to do in my opinion with the scrollbar being in place. It should not be enable as there should be no need to scroll. 

[Dimo]

Hi Ron,

Now I see. Well, the observed behavior seems to depend on the font size. For example:

http://runner.telerik.io/fullscreen/EbIyI/2

- font size 12px - the scrollbar is active and the data table is 1-2 px scrollable
- font size 16px - the scrollbar is active and the data table is not scrollable
- font size 20px - the scrollbar is disabled

(testing in IE11)

Based on the above, my conclusion is that this is a browser bug.

Regards,
Dimo
Telerik

 

 

[Ron]

It's a bit easy to just write it off as a browser bug I think. Are you sure it can't be fixed? Maybe a workaround?

[Dimo]

Hi Ron,

Generally, fixing such issues is a hit and miss process, which may produce a workaround that works in a specific scenario only, just like the problem itself is exhibited. Avoiding the issue universally may not be possible, or may require an approach that we are reluctant to implement.

In this particular case, changing some style values from relative to absolute units does the trick:

http://dojo.telerik.com/@dimodi/IfAPE

You can adjust the exact values to your liking and the font size that your application is using.

Regards,
Dimo
Telerik

 

 

[Ron]

Unfortunately font sizes aren't fixed in our applications. The user may alter UI settings like font familyt, sizes, colors, etc.. I'm still unsure on how to solve this without selecting font sizes by using a 'trial and error'. Even more so if I have to explain that to my customers.

[Dimo]

Hello Ron,

Well, if you will not be needing a vertical Grid scrollbar and Grid height, then disable Grid scrolling completely and place the widget inside a horizontally scrollable <div>. Alternatively, use the previously provided approach to remove the vertical Grid scrollbar.

I have no other suggestions at this point.

Regards,
Dimo
Telerik