This is a migrated thread and some comments may be shown as answers.

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

7 Answers 174 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Veteran
Ron asked on 29 Dec 2014, 02:18 PM
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. 

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 30 Dec 2014, 12:12 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ron
Top achievements
Rank 1
Veteran
answered on 30 Dec 2014, 02:21 PM
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. 
0
Dimo
Telerik team
answered on 30 Dec 2014, 02:43 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 30 Dec 2014, 03:10 PM
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?
0
Dimo
Telerik team
answered on 30 Dec 2014, 04:04 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 05 Jan 2015, 04:52 PM
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.
0
Dimo
Telerik team
answered on 05 Jan 2015, 05:15 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Ron
Top achievements
Rank 1
Veteran
Answers by
Dimo
Telerik team
Ron
Top achievements
Rank 1
Veteran
Share this question
or