I have 3 raddockzones. For each zone, I set my width to 33% and min-width to some px. However, when I resize my window (IE8), raddock zone did not resize properly. Is there a way to make a 3 relative size column raddockzone with fixed position instead of using float left?
Also, each dock title become funny looking when I change client size. Is there something that I can do to make resize work properly (please see attached)?
Also, each dock title become funny looking when I change client size. Is there something that I can do to make resize work properly (please see attached)?
3 Answers, 1 is accepted
0
Hello WenTao,
For the first issue, you could apply an additional CSS class to RadDockZone and instead floating left, to use display: inline-block.
For the second issue, when you resize the browser window, the Dock are also reszied, and there is no enough space for the title width and it breaks the title zone. This could be fixed by applying some specific width for Title and set the overflow to hidden. This will prevent the breaking of the title zone, and if title is too long when it is resized part of it will be hidden.
For your convenience I have prepared some simple sample code. In yellow are marked the necessary changes:
Best wishes,
Bojo
the Telerik team
For the first issue, you could apply an additional CSS class to RadDockZone and instead floating left, to use display: inline-block.
For the second issue, when you resize the browser window, the Dock are also reszied, and there is no enough space for the title width and it breaks the title zone. This could be fixed by applying some specific width for Title and set the overflow to hidden. This will prevent the breaking of the title zone, and if title is too long when it is resized part of it will be hidden.
For your convenience I have prepared some simple sample code. In yellow are marked the necessary changes:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!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 runat="server"> <title></title> <style type="text/css"> .inlineDock { display: inline-block; zoom: 1; /* IE hack to trigger hasLayout */ *display: inline; /* IE hack to achieve inline-block behavior */ } .rdTitleBar em { width: 70% !important; /* this value could be changed depending on the resize */ overflow: hidden; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" Width="33%" CssClass="inlineDock"> <telerik:RadDock runat="server" ID="rdPhoneNotes" Width="230px" EnableAnimation="true" DefaultCommands="All" Skin="Default" Title="Custom Command"> <ContentTemplate> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam. Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros. Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat. Mauris sit amet nulla augue, sit amet pulvinar arcu. </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> <telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Width="33%" CssClass="inlineDock"> <telerik:RadDock runat="server" ID="RadDock1" Width="230px" EnableAnimation="true" DefaultCommands="All" Skin="Default" Title="Custom Command"> <ContentTemplate> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam. Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros. Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat. Mauris sit amet nulla augue, sit amet pulvinar arcu. </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> <telerik:RadDockZone ID="RadDockZone3" runat="server" Orientation="Vertical" Width="33%" CssClass="inlineDock"> <telerik:RadDock runat="server" ID="RadDock2" Width="230px" EnableAnimation="true" DefaultCommands="All" Skin="Default" Title="Custom Command"> <ContentTemplate> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam. Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros. Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat. Mauris sit amet nulla augue, sit amet pulvinar arcu. </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </div> </form></body></html>Best wishes,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Edmund
Top achievements
Rank 1
Rank 1
answered on 06 Jan 2011, 06:52 AM
Thank you for your reply. When I applied your solution, I still have 1 more issue. During window resize, docks on the right tend to flow under first dock. I tried to make overflow hidden, but it didn't work. Is there a way to make dock panel fixed in 3 columns configuration during window resize (so they don't flow under each other)? Here is my CSS code:
.inlineDock
{
display: inline-block;
zoom: 1; /* IE hack to trigger hasLayout */*display: inline;
/* IE hack to achieve inline-block behavior */
width: 32% !important;
overflow: hidden !important;
min-width: 200px !important;
vertical-align: top !important;
border-width: 1px !important;
}
Thank you!
0
Hello WenTao,
I am not quite sure if this will helps, but you could try and let us know if this is what you want to achieve:
Regards,
Bojo
the Telerik team
I am not quite sure if this will helps, but you could try and let us know if this is what you want to achieve:
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!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 runat="server"> <title></title> <style type="text/css"> .RadDockZone { width: 100% !important; } .dockWidth { width: 32% !important; display: inline-block; margin-left: 5px; zoom: 1; /* IE hack to trigger hasLayout */ *display: inline; /* IE hack to achieve inline-block behavior */ } .inlineDock { display: inline-block; width: 31%; zoom: 1; /* IE hack to trigger hasLayout */ *display: inline; /* IE hack to achieve inline-block behavior */ overflow: hidden !important; } .rdTitleBar em { width: 70% !important; /* this value could be changed depending on the resize */ overflow: hidden; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" CssClass="inlineDock"> <telerik:RadDock runat="server" ID="rdPhoneNotes" Width="230px" EnableAnimation="true" DefaultCommands="All" Skin="Default" Title="Custom Command" CssClass="dockWidth"> <ContentTemplate> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam. Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros. Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat. Mauris sit amet nulla augue, sit amet pulvinar arcu. </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> <telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" CssClass="inlineDock"> <telerik:RadDock runat="server" ID="RadDock1" Width="230px" EnableAnimation="true" DefaultCommands="All" Skin="Default" Title="Custom Command" CssClass="dockWidth"> <ContentTemplate> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam. Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros. Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat. Mauris sit amet nulla augue, sit amet pulvinar arcu. </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> <telerik:RadDockZone ID="RadDockZone3" runat="server" Orientation="Vertical" CssClass="inlineDock"> <telerik:RadDock runat="server" ID="RadDock2" Width="230px" EnableAnimation="true" DefaultCommands="All" Skin="Default" Title="Custom Command" CssClass="dockWidth"> <ContentTemplate> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis luctus quam. Mauris consectetur enim et metus varius quis aliquam sapien consectetur. Nulla eget diam lacus, in tempus lacus. Praesent vitae volutpat leo. Curabitur ac neque eros. Aliquam vel dolor arcu, quis viverra mi. Fusce velit libero, tincidunt eget gravida eget, gravida id neque. Sed elementum aliquam enim ac sagittis. Sed eu nulla sit amet felis consequat dapibus. Duis et nulla eget nisi aliquam venenatis in in erat. Mauris sit amet nulla augue, sit amet pulvinar arcu. </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </div> </form></body></html>Regards,
Bojo
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.