When specifying the raddock's content width to be 100%, Firefox 3.6 and IE8 appear to function as expected; however, Safari(4.0.5) and Chrome(4.1.249.1064) seem to lose some width after the raddock control is collapsed, and then expanded.
Perhaps I'm doing something wrong? Any help is greatly appreciated.
Below is a snippet of the code:
| <form id="form1" runat="server" method="post"> |
| <telerik:RadScriptManager ID="scriptManager1" runat="server"></telerik:RadScriptManager> |
| <telerik:RadDockZone runat="server" ID="dzLeft" Orientation="Vertical" FitDocks="true"> |
| <telerik:RadDock runat="server" ID="raddock1" Title="RadDock1" DefaultCommands="ExpandCollapse"> |
| <ContentTemplate> |
| <div style="background: grey; width: 100%;"> </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </form> |
Thanks,
Mike
edit: attached before and after images.
4 Answers, 1 is accepted
0
Michael
Top achievements
Rank 1
Rank 1
answered on 12 May 2010, 04:42 PM
I am using version 2009.3.1103.35 of Telerik.Web.UI.dll.
Mike
0
Michael
Top achievements
Rank 1
Rank 1
answered on 12 May 2010, 04:48 PM
Just verified the behavior is the same in version 2010.1.415.35 of Telerik.Web.UI.dll.
Mike
0
Accepted
Hi Mike,
It seems like, this is a browser related issue. When the dock is collapsed, its content is hid using display: none. After expanding the dock, the browser (Safari or Chrome) does not correctly redraw, the previously hidden content. To avoid the problem, you can reset the width of the <div/> to 100%, when the dock is expanded or collapsed. Here is a sample source code that does that:
Our recommendation is to not set width to the <div/> at all, since it is a "block" element, and its width will be 100% by default. For example if you set border: 2px solid Red; and width:100%, scrollbars will be shown, which is not the case if the width is not set at all.
Best wishes,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
It seems like, this is a browser related issue. When the dock is collapsed, its content is hid using display: none. After expanding the dock, the browser (Safari or Chrome) does not correctly redraw, the previously hidden content. To avoid the problem, you can reset the width of the <div/> to 100%, when the dock is expanded or collapsed. Here is a sample source code that does that:
<%@ 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"><head runat="server"> <title></title> <script type="text/javascript"> function resizeDiv(sender, args) { if (args.command.get_name() == "ExpandCollapse") { $get("a1").style.width = "100%"; window.setTimeout(function() { $get("a1").style.width = ""; }, 1); } } </script></head><body> <form id="form1" runat="server" method="post"> <telerik:RadScriptManager ID="scriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadDockZone runat="server" ID="dzLeft" Orientation="Vertical" FitDocks="true" Width="300px"> <telerik:RadDock Title="RadDock1" DefaultCommands="ExpandCollapse" runat="server" EnableAnimation="false" Width="500px" OnClientCommand="resizeDiv"> <ContentTemplate> <div id="a1" style="background: grey;"> some content </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </form></body></html>Our recommendation is to not set width to the <div/> at all, since it is a "block" element, and its width will be 100% by default. For example if you set border: 2px solid Red; and width:100%, scrollbars will be shown, which is not the case if the width is not set at all.
Best wishes,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Michael
Top achievements
Rank 1
Rank 1
answered on 13 May 2010, 02:36 PM
Thanks.