If you view the following Telerik example using IE7 and FF3.5, the top set of RadDock objects look correct (only a vertical scroll bar and RadDock title bar fully visible) under FF but incorrect (vertical and horizontal scroll bar and RadDock title bar obscured by scroll bar) under IE.
http://demos.telerik.com/aspnet-ajax/dock/examples/zoneorientation/defaultcs.aspx
Is there a fix for this?
http://demos.telerik.com/aspnet-ajax/dock/examples/zoneorientation/defaultcs.aspx
Is there a fix for this?
3 Answers, 1 is accepted
0
Hi Doug,
This is not a problem with our example and certainly not a problem with the RadDock control, but a default behavior of the IE7 browser. The RadDockZone and the RadDock controls are loaded on the page as <div> elements. If the <div> has overflow-y: auto as is the case with the RadDockZone, when the vertical scroll-bar is shown it takes up from the width of the <div> and if the elements (<div>s in our case) have width:100% (when FitDocks="true" [this is by default] of the zone the docks placed within have width:100%) the horizontal scroll-bar will be shown. You can disable the horizontal scroll-bar by overflow-x: hidden.
You can set overflow-x: hidden to the RadDockZone using the following CSS class:
For your convenience I have created a sample project to show that if you have a similar layout as the one's with zones and docks, but this time only composed of <div> elements, the horizontal scroll-bar will be shown. Here is the source code:
Regards,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
This is not a problem with our example and certainly not a problem with the RadDock control, but a default behavior of the IE7 browser. The RadDockZone and the RadDock controls are loaded on the page as <div> elements. If the <div> has overflow-y: auto as is the case with the RadDockZone, when the vertical scroll-bar is shown it takes up from the width of the <div> and if the elements (<div>s in our case) have width:100% (when FitDocks="true" [this is by default] of the zone the docks placed within have width:100%) the horizontal scroll-bar will be shown. You can disable the horizontal scroll-bar by overflow-x: hidden.
You can set overflow-x: hidden to the RadDockZone using the following CSS class:
<head id="Head1" runat="server"> <title></title> <style type="text/css"> .RadDockZone { overflow-x: hidden !important; } </style></head>For your convenience I have created a sample project to show that if you have a similar layout as the one's with zones and docks, but this time only composed of <div> elements, the horizontal scroll-bar will be shown. Here is the source code:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css"> .RadDockZone { overflow-x: hidden !important; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Office2007"> <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px"> <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> <div style="position: relative; border: solid Red; width: 300px; height: 300px; overflow-y: auto; float: left; margin-right: 10px; padding: 4px;"> <div style="width: 100%; height: 200px; border: solid 1px Black; position: relative; text-align: right;"> Div123456789 </div> <div style="width: 100%; height: 200px; border: solid 1px Green; position: relative; text-align: right;"> Div 23456789 </div> </div> <div style="position: relative; border: solid Red; width: 300px; height: 300px; overflow-y: auto; overflow-x: hidden; float: left; padding: 4px;"> <div style="width: 100%; height: 200px; border: solid 1px Black; position: relative; text-align: right;"> Div123456789 </div> <div style="width: 100%; height: 200px; border: solid 1px Green; position: relative; text-align: right;"> Div 23456789 </div> </div> </form></body></html>Regards,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Tyler
Top achievements
Rank 1
Rank 1
answered on 19 Nov 2009, 03:55 PM
Pero
Thank you for this information. Unfortunately, this does not solve my problem. Your solution does make the horizontal scroll bar go away which is great, but the vertical scroll bar is still covering up the RadDock itself, where as in IE8 the RadDock automatically gets resized to fit completely within the RadDockZone. Please see the attached images from your example below
Notice that in the IE7 image, you cannot see the "89" characters in the highlighted RadDockZones, but in the IE8 image, you can see them. Aesthetically, this looks bad, but from a functionality standpoint, if the "89" were a close/minimize button, now someone cannot close/minimize a RadDock.
Do you have any advice on how to make IE7 act/look just like IE8?
Thanks
Tyler
Thank you for this information. Unfortunately, this does not solve my problem. Your solution does make the horizontal scroll bar go away which is great, but the vertical scroll bar is still covering up the RadDock itself, where as in IE8 the RadDock automatically gets resized to fit completely within the RadDockZone. Please see the attached images from your example below
Notice that in the IE7 image, you cannot see the "89" characters in the highlighted RadDockZones, but in the IE8 image, you can see them. Aesthetically, this looks bad, but from a functionality standpoint, if the "89" were a close/minimize button, now someone cannot close/minimize a RadDock.
Do you have any advice on how to make IE7 act/look just like IE8?
Thanks
Tyler
0
Hi Tyler,
There is not much we can do to change this IE7 behavior. The scroll-bars will always cover part of the RadDocks placed within the RadDockZone. One solution to this problem is to set padding-right to the RadDockZone and this padding to be set only under IE7 (* + html marker). Here is a modified project that has padding-right: 20px and the vertical scroll-bar is always shown.
All the best,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
There is not much we can do to change this IE7 behavior. The scroll-bars will always cover part of the RadDocks placed within the RadDockZone. One solution to this problem is to set padding-right to the RadDockZone and this padding to be set only under IE7 (* + html marker). Here is a modified project that has padding-right: 20px and the vertical scroll-bar is always shown.
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title></title> <style type="text/css"> /*The following styles will be only applied under IE7. */* + html .RadDockZone { overflow-x: hidden !important; padding-right: 20px !important; overflow-y: scroll !important; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Office2007"> <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px"> <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> <div style="position: relative; border: solid Red; width: 300px; height: 300px; overflow-y: auto; float: left; margin-right: 10px; padding: 4px;"> <div style="width: 100%; height: 200px; border: solid 1px Black; position: relative; text-align: right;"> Div123456789 </div> <div style="width: 100%; height: 200px; border: solid 1px Green; position: relative; text-align: right;"> Div 23456789 </div> </div> <div style="position: relative; border: solid Red; width: 300px; height: 300px; overflow-y: auto; overflow-x: hidden; float: left; padding: 4px;"> <div style="width: 100%; height: 200px; border: solid 1px Black; position: relative; text-align: right;"> Div123456789 </div> <div style="width: 100%; height: 200px; border: solid 1px Green; position: relative; text-align: right;"> Div 23456789 </div> </div> </form></body></html>All the best,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.