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

Grid footer height expands on custom action mouseover/mouseout

10 Answers 252 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Drew
Top achievements
Rank 1
Drew asked on 06 Jul 2012, 03:54 PM
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?

10 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Jul 2012, 06:21 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Drew
Top achievements
Rank 1
answered on 10 Jul 2012, 05:40 PM
Thank you Dimo, good find!
0
Greg
Top achievements
Rank 1
answered on 17 Jul 2012, 12:44 AM
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
0
Greg
Top achievements
Rank 1
answered on 17 Jul 2012, 03:46 AM
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"
0
Dimo
Telerik team
answered on 18 Jul 2012, 03:03 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Greg
Top achievements
Rank 1
answered on 19 Jul 2012, 01:23 AM
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
0
Dimo
Telerik team
answered on 19 Jul 2012, 06:46 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nick
Top achievements
Rank 1
answered on 21 Sep 2012, 02:32 PM
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/
.
0
Dimo
Telerik team
answered on 25 Sep 2012, 10:20 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nick
Top achievements
Rank 1
answered on 25 Sep 2012, 01:28 PM
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.
Tags
Grid
Asked by
Drew
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Drew
Top achievements
Rank 1
Greg
Top achievements
Rank 1
Nick
Top achievements
Rank 1
Share this question
or