Grid footer height expands on custom action mouseover/mouseout

[Drew]

This only happens in IE 9. I'm using the kendo silver style.  I have a custom action in a grid.  On mouseover and mouseout, the grid body height expands (right above the footer, but below the scrollbar).  The template for the custom button also seems to remove the filtering options for the other columns.

Here it is in action (if you use IE 9!):
http://jsfiddle.net/xeyaT/

Do you guys have any idea why or how this might happen?

[Dimo]

Hi Drew,

The observed behavior is caused by a known IE9 bug related to scrollable containers and :hover styles in the CSS. Possible workarounds include:

+ Prevent the Grid from applying a horizontal scrollbar by increasing its width.
or
+ Remove the :hover styles that are related to the buttons inside the Grid. This includes styles in the Kendo stylesheets as well.

Greetings,
Dimo
the Telerik team

[Drew]

Thank you Dimo, good find!

[Greg]

Dimo
I had a similar issue with Telrik extensions for ASP.NET MVC
You pointed me to this post!

Your solution is to:
/*********************************************************************
+ Prevent the Grid from applying a horizontal scrollbar by increasing its width.
or
+ Remove the :hover styles that are related to the buttons inside the Grid. This includes styles in the Kendo stylesheets as well.
**********************************************************************/
The telrik treeview control does not render Grid or buttons, it renders div, ul and spans.

So are you saying that we should hack Telrik or Kendo Css files so as to disable the hover style in ALL Telrik and Kendo controls because our clients have chosen to use IE, a choice that we have no control over.

Or do you propose a solution where the hover styles will be able to be used in all major browser at a version level for each

BTW, I found "hover" styles in no less than 12 files and on no less than 24 different classes. That is a lot of Hacking by a lot of developers who aren't the authors of the styling controls

regards

GregJF

[Greg]

Dimo
If you look closely at the http://jsfiddle.net/xeyaT/   example
you will see that the div has an overflow:auto
If you set that, in the example, to                overflow:none !important;
click the update button at the top
and then hover over the bottom grid, the size does not grow

So what in the html rendered by telrik treeview html, do I overwrite to get the same effect


regards

GregJF
"My father once said that I had not sold my bike until a year had passed and I was still friends with the boy I sold it to and he didn't want his money back"

[Dimo]

Hello Greg,

As you may have observed already, the TreeView has an overflow:auto style applied to its outer <div>. You can override it with:

.someTreeViewParentClass div.k-treeview
{
       overflow: visible;
}

(there is no such thing as overflow:none)

I agree that removing all hover styles from the Kendo stylesheets is not a one-minute job, but I also don't think that ditching all hover styles from the source code due to a lame browser bug that was discovered not long ago is a feasible solution either. My personal recommendation is to try to avoid triggering the issue.

All the best,
Dimo
the Telerik team

[Greg]

Dimo
very good
I will try that override

BTW, how would you "avoid triggering the issue" as it is in the telrik control styling

regards

gregJF

[Dimo]

Hello Greg,

As far as I know, the problem is caused when horizontal scrolling exists. So avoiding horizontal scrolling should prevent the problem from exhibiting. I.e. use a wider TreeView

All the best,
Dimo
the Telerik team

[Nick]

This can also be solved by specifying a height on a wrapper div and setting the inner div height o 100%.  I had this same problem with one of the DataViz charts.  You can see an example of the solution here: http://nickstips.wordpress.com/2012/09/21/ie9-bug-div-height-grows-on-hover-when-overflow-is-set-to-auto/
.

[Dimo]

Hi all,

Nick, thanks for sharing your research. I think there is no need for an additional wrapper element, as long as the scrollable one has explicit pixel height, right?

Here is a jsFiddle demo, which demonstrates the problem and a possible workaround:

(standalone readonly example)
http://jsfiddle.net/dimodi/hXCKY/show/

(editable example)
http://jsfiddle.net/dimodi/hXCKY/

Greetings,
Dimo
the Telerik team

[Nick]

That looks like it works fine.  I actually haven't had this problem with the grid as we are not using it so I can't be of much help there.  We have just found this problem with the DataViz charts which required a wrapper.