[Solved] Scrollable Height auto - IE issues

[Alex]

Using 2012 Q1 release with MVC3.  There are two issues with IE that don't exist in other browsers, such as Chrome and Firefox.

Issue 1 - Horizontal scroll bar forces a vertical scroll bar.
Browser: IE 9 Compatibility mode
Expected result: Vertical scrolling should not be needed in "auto" height

Issue 2 - Hovering over Selectable grid rows  adds whitespace below the grid
Browser: IE 9 standard mode (not compatibility mode)
Expected result: no whitespace should be added to the page when hovering over the grid

Please see the attached project to easily reproduce the issues described above.

Alex

[Dimo]

Hello Alex,

Both problems are related to browser behavior/bugs and they are even related to each other. With regard to the second one, remove all :hover styles in your stylesheets, if possible, or sacrifice horizontal scrolling.

http://twitter.com/#!/ie9bugs/status/131770982967951360

Regards,
Dimo
the Telerik team

[Alex]

Dimo,

Thank you for the quick response.  There was only one :hover in Site.css of the attached project (#logindisplay a:hover) 
 and commenting it out didn't help either problem.  Should I be modifying Telerik's css files as well?

Is there an option to add IE9 specific workarounds to fix these behaviors/bugs?

Thanks.

Alex

[Dimo]

Hi Alex,

I am not aware of any IE9-specific CSS hacks. Since modifying stylesheets can be cumbersome or undesired (the same for removing scrollability), you can try replacing the links in your Grid with some other elements with attached click handlers that would do the same job.

Greetings,
Dimo
the Telerik team

[Alex]

After playing around with CSS for a bit I came up with the following set of workarounds that do a perfect job for fixing Issue 1 (remove vertical scroll bar).  Not only is this useful for IE, but it also removes the useless vertical scrollbar from other browsers.  Tested in IE9 and IE 8, Firefox 10, Chrome 17.  Place the code in your view before the grid.

<!-- grid auto height fixes http://www.telerik.com/community/forums/aspnet-mvc/grid/scrollable-height-auto---ie-issues.aspx -->
<style>
    .t-grid-header {
        padding-right: 0px !important; /* remove header scrollbar padding*/
    }

    .t-grid-content {
        overflow-y: hidden !important; /* auto height grid doesn't need vertical scroll bar'*/
        padding-bottom: 15px !important\0/; /* IE last row cut-off fix */
    }
</style>

Now, if someone knows a fix for the 2nd issue (hovering adds whitespace below grid).

Alex

[Siva]

Hi Alex,

This should solve your second problem

.Scrollable(builder => builder.Enabled(true).Height("100%"))
Height 100% is the key

Regards,
Siva

[Alex]

Perfect.  Thanks Siva.

[Zippo]

With IE9 the grid shows a vertical scroll bar even when the height is auto (the grid container has no CSS height).
This hack works for me:
div:not([style="~height"]) .k-grid-header{padding-right:0 !important;}
div:not([style="~height"]) .k-grid-content{overflow-y: hidden !important;}