Greetings All,
After racking my brain for hours, and spending several more hours searching for an elegant solution, I have yet to find an answer to my problem and am hoping fellow RadControl users or Telerik might point me in the right direction.
Problem: I would like to place two equally sized vertically oriented RadZones in a DIV such that the radzones + 5px margins fill 100% of the parent container (see conceptual.jpg). However, I have been unable to find the right combination of CSS and RadZone settings to accomplish this task much less find a solution that is browser agnostic.
Code:
CSS:
Any help readers can provide would be gratefully appreciated.
After racking my brain for hours, and spending several more hours searching for an elegant solution, I have yet to find an answer to my problem and am hoping fellow RadControl users or Telerik might point me in the right direction.
Problem: I would like to place two equally sized vertically oriented RadZones in a DIV such that the radzones + 5px margins fill 100% of the parent container (see conceptual.jpg). However, I have been unable to find the right combination of CSS and RadZone settings to accomplish this task much less find a solution that is browser agnostic.
Code:
| <!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" xml:lang="en" lang="en"> |
| <head> |
| <title>Proof of Concept App</title> |
| <asp:ContentPlaceHolder ID="head" runat="server" /> |
| <script type='text/javascript' src='js/jquery-1.3.1.min.js'></script> |
| <script type='text/javascript' src='js/easing.js'></script> |
| <script type="text/javascript"> |
| $(document).ready(function () { |
| $("div#handle").click(function (e) { |
| e.preventDefault(); |
| $("div#sidebar_content").toggle("fast"); |
| }); |
| }); |
| </script> |
| <link href="css/reset.css" rel="stylesheet" type="text/css" /> |
| <link href="css/global.css" rel="stylesheet" type="text/css" /> |
| <link href="css/master.css" rel="stylesheet" type="text/css" /> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> |
| </telerik:RadAjaxManager> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <div id="pagewrap"> |
| <div id="header"> |
| <div class="logo"><img src="images/logo.gif" alt="itrack_logo" /></div> |
| <div class="info"><%=GetGreeting() %> <b>Username</b>.<br />You have XX action items in your queue.</div> |
| <div id="topnav"> |
| </div> |
| <div id="breadcrumbs"> |
| <ul> |
| <li><a href="#" title="Dashboard">Dashboard</a></li> |
| <li><a href="#" title="Section">Section</a></li> |
| <li><a href="#" title="Type">Type</a></li> |
| <li>Instance</li> |
| </ul> |
| </div> |
| </div> |
| <div id="contentwrap"> |
| <div id="sidebar_content"> |
| <rad:RadPanelbar runat="server" ID="RadPanelbar1" Height="100%" Width = "100%" |
| Skin="WebBlue" ExpandMode="FullExpandedItem" CollapseAnimation-Type="none" ExpandAnimation-Type="None"> |
| <Items> |
| <rad:RadPanelItem Text="Menu Item 1" Expanded="true"> |
| <Items> |
| <rad:RadPanelItem> |
| <ItemTemplate> |
| Lorem<br /> |
| Ipsum<br /> |
| Dolar |
| </ItemTemplate> |
| </rad:RadPanelItem> |
| </Items> |
| </rad:RadPanelItem> |
| <rad:RadPanelItem Text="Menu Item 2 COAs"> |
| <Items> |
| <rad:RadPanelItem> |
| <ItemTemplate> |
| Lorem<br /> |
| Ipsum<br /> |
| Dolar |
| </ItemTemplate> |
| </rad:RadPanelItem> |
| </Items> </rad:RadPanelItem> |
| <rad:RadPanelItem Text="Menu Item 3"> |
| <Items> |
| <rad:RadPanelItem> |
| <ItemTemplate> |
| Lorem<br /> |
| Ipsum<br /> |
| Dolar |
| </ItemTemplate> |
| </rad:RadPanelItem> |
| </Items> |
| </rad:RadPanelItem> |
| </Items> |
| </rad:RadPanelbar> |
| </div> |
| <div id="handle" ><div class="top"></div><div class="grippy"></div><div class="bottom"></div></div> |
| <div id="main"> |
| <rad:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Web20" > |
| <%--Would like to create two equally sized zones having | 5 px | Zone Left ((Div width - 15)/2) px | 5px | Zone Right ((Div width - 15)/2) px | 5 px |--%> |
| <rad:RadDockZone ID="zoneLeft" runat="server" Orientation="Vertical" > |
| <rad:RadDock ID="RadDock1" Runat="server"> |
| <ContentTemplate> |
| Lorem Ipsum Dolar |
| </ContentTemplate> |
| </rad:RadDock> |
| </rad:RadDockZone> |
| <rad:RadDockZone ID="zoneRight" runat="server" Orientation="Vertical"> |
| </rad:RadDockZone> |
| </rad:RadDockLayout> |
| </div> |
| </div> |
| </div> |
| </form> |
| </body> |
| </html> |
CSS:
| div#pagewrap{position:absolute;width:100%;height:100%;margin:0 auto 0 auto}div#contentwrap{position:absolute;top:87px;bottombottom:5px;overflow:scroll;padding-right:5px}div#header{position:relative;top:0;width:100%;height:85px;overflow:hidden;margin:0;background:url(../images/header_bkgd.gif) repeat-x}#header .logo{float:left}#header .info{float:rightright;padding:5px;font-family:arial;color:#fff;font-size:12px;text-align:rightright}#topnav{vertical-align:middle;font-weight:bold;color:#fff;height:43px}#breadcrumbs{position:absolute;top:43px;left:255px;font:13px Arial,Helvetica,sans-serif;background-image:url(../images/bc_bg.gif);background-repeat:repeat-x;height:30px;line-height:30px;color:#ddd;overflow:hidden;margin:0;padding:0;width:100%}#breadcrumbs ul,li{list-style-type:none;padding:0;margin:0}#breadcrumbs li{float:left;display:inline-block;padding-left:10px;height:30px;line-height:30px}#breadcrumbs a{display:inline-block;background-image:url(../images/bc_separator.gif);background-repeat:no-repeat;background-position:rightright;padding-right:15px;text-decoration:none;color:#fff;outline:none;height:30px;line-height:30px}#breadcrumbs .home{border:none;margin:8px 0}#breadcrumbs li a:link,#breadcrumbs li a:visited{text-decoration:none;color:#fff}#breadcrumbs li a:hover,#breadcrumbs li a:focus{color:red}div#sidebar_content{height:100%;border-right:solid 1px #DDD;background-color:#707173;width:300px;float:left}div#handle{height:100%;text-decoration:none;width:10px;float:left;margin-right:5px;background-color:#adadad}#handle .bottombottom{position:absolute;bottombottom:0;width:10px;height:10px;margin:0;padding:0;background:url(../images/sb_bottom.gif) no-repeat bottombottom left;background-color:#fff}#handle .top{position:absolute;top:0;width:10px;height:10px;margin:0;padding:0;background:url(../images/sb_top.gif) no-repeat top left;background-color:#fff}#handle .grippy{position:absolute;top:50%;align:center;background:url(../images/LibC.gif) -178px 0;width:5px;height:20px;margin-left:3px}div#handle.open{background-color:#aaa}div#handle.close{background-color:#ccc}div#main{position:relative;height:100%;width:100%;background-color:#ccc;overflow-y:auto} |
Any help readers can provide would be gratefully appreciated.
8 Answers, 1 is accepted
0
Hi,
To achieve the desired behavior you should place each zone in a separate table-cell (of the same table row) and set table-layout: fixed to the table. This way the table-cells will always respect the width you have set to them (i.e. 50% width so that each cell takes-up equal amount of width from the table's width). You can set the Width and Height properties of the RadDockZones using percentage values. The following CSS code will set 5px margin to all zones that are present on the page:
Here is a project that I tested:
Kind 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.
To achieve the desired behavior you should place each zone in a separate table-cell (of the same table row) and set table-layout: fixed to the table. This way the table-cells will always respect the width you have set to them (i.e. 50% width so that each cell takes-up equal amount of width from the table's width). You can set the Width and Height properties of the RadDockZones using percentage values. The following CSS code will set 5px margin to all zones that are present on the page:
<style type="text/css"> .RadDockZone { margin: 5px; }</style>Here is a project that I tested:
<%@ 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"> .tdClass { width: 50%; height: 98%; } div#main { position: relative; height: 600px; width: 100%; background-color: #ccc; overflow-y: auto; border: 1px solid red; } .RadDockZone { margin: 5px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <div id="main"> <table style="table-layout: fixed; width: 100%; height: 100%;"> <tr> <td class="tdClass"> <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="96%" MinHeight="300px" Height="95%"> <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:RadDockZone> </td> <td class="tdClass"> <telerik:RadDockZone ID="RadDockZone2" runat="server" Width="96%" MinHeight="300px" Height="95%"> <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:RadDockZone> </td> </tr> </table> </div> </telerik:RadDockLayout> </div> </form></body></html>Kind 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
JMKeynes
Top achievements
Rank 1
Rank 1
answered on 27 Nov 2009, 09:15 PM
Pero,
Thank you for your reply. Your solution was helpful, and you are correct that I can accomplish this behavior with tables. Perhaps this is more curiosity than practicality, but can the same layout be constructed without the use of tables?
Best,
David
Thank you for your reply. Your solution was helpful, and you are correct that I can accomplish this behavior with tables. Perhaps this is more curiosity than practicality, but can the same layout be constructed without the use of tables?
Best,
David
0
Hello David,
You can place each zone in a separate <div> and set the following style attributes to both <div>s: float: left, width: 50%(if you have specified margin the second <div> might be displayed below the first - in IE7). The <div> elements are placed inside the outermost <div>.
Best wishes,
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.
You can place each zone in a separate <div> and set the following style attributes to both <div>s: float: left, width: 50%(if you have specified margin the second <div> might be displayed below the first - in IE7). The <div> elements are placed inside the outermost <div>.
Best wishes,
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
JMKeynes
Top achievements
Rank 1
Rank 1
answered on 01 Dec 2009, 02:52 PM
Pero,
If you wouldn't mind, please take a look at the code I have provided. I already attempted your recommendation of placing the dock components in a div. However, the behavior is not as expected either with the sidebar expanded or collapsed. It is very possible I missed a critical step -- do you happen to see where I made the mistake?
David
If you wouldn't mind, please take a look at the code I have provided. I already attempted your recommendation of placing the dock components in a div. However, the behavior is not as expected either with the sidebar expanded or collapsed. It is very possible I missed a critical step -- do you happen to see where I made the mistake?
David
0
Hello David,
I think the easiest way to achieve the desired behavior is to use our RadSplitter control. The following demo will give you an idea how to implement your scenario. Additionally here is a sample project that has two zones in a right pane and the panel bar in the left pane:
In case you want to stay with your custom implementation, you need to set width:100% to the outermost container element and specify the width of all inner divs in percent values (and not in pixels like in the case with the left-most div - 300px and the splitter div - 10px). When the sidebar is collapsed the width of the zone's container needs to be set to 100% using client-code.
Best wishes,
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.
I think the easiest way to achieve the desired behavior is to use our RadSplitter control. The following demo will give you an idea how to implement your scenario. Additionally here is a sample project that has two zones in a right pane and the panel bar in the left pane:
<%@ 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 runat="server"> <title></title></head><body style="height: 100%;"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div style="width: 100%; height: 100%; border: 2px solid orange;"> <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%"> <telerik:RadPane runat="server" ID="RadPane1" Width="300px"> <telerik:RadPanelBar runat="server" ID="RadPanelbar1" Height="100%" Width="100%" Skin="WebBlue" ExpandMode="FullExpandedItem" CollapseAnimation-Type="none" ExpandAnimation-Type="None"> <Items> <telerik:RadPanelItem Text="Menu Item 1" Expanded="true"> <Items> <telerik:RadPanelItem> <ItemTemplate> Lorem<br /> Ipsum<br /> Dolar </ItemTemplate> </telerik:RadPanelItem> </Items> </telerik:RadPanelItem> <telerik:RadPanelItem Text="Menu Item 2 COAs"> <Items> <telerik:RadPanelItem> <ItemTemplate> Lorem<br /> Ipsum<br /> Dolar </ItemTemplate> </telerik:RadPanelItem> </Items> </telerik:RadPanelItem> <telerik:RadPanelItem Text="Menu Item 3"> <Items> <telerik:RadPanelItem> <ItemTemplate> Lorem<br /> Ipsum<br /> Dolar </ItemTemplate> </telerik:RadPanelItem> </Items> </telerik:RadPanelItem> </Items> </telerik:RadPanelBar> </telerik:RadPane> <telerik:RadSplitBar runat="server" ID="RadSplitbar1" CollapseMode="Forward" /> <telerik:RadPane runat="server" ID="Radpane2"> <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Web20"> <%--Would like to create two equally sized zones having | 5 px | Zone Left ((Div width - 15)/2) px | 5px | Zone Right ((Div width - 15)/2) px | 5 px |--%> <div style="float: left; width: 50%; height: 100%;"> <telerik:RadDockZone ID="zoneLeft" runat="server" Orientation="Vertical" MinHeight="300px"> <telerik:RadDock ID="RadDock1" runat="server"> <ContentTemplate> Lorem Ipsum Dolar </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </div> <div style="float: right; width: 50%; height: 100%;"> <telerik:RadDockZone ID="zoneRight" runat="server" MinHeight="300px"> </telerik:RadDockZone> </div> </telerik:RadDockLayout> </telerik:RadPane> </telerik:RadSplitter> </div> </form></body></html>In case you want to stay with your custom implementation, you need to set width:100% to the outermost container element and specify the width of all inner divs in percent values (and not in pixels like in the case with the left-most div - 300px and the splitter div - 10px). When the sidebar is collapsed the width of the zone's container needs to be set to 100% using client-code.
Best wishes,
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
Shane Grant
Top achievements
Rank 1
Rank 1
answered on 01 Jan 2010, 09:32 PM
Pero,
I am trying to do something similar, but in your sample each time I collapse the left side and open it back up the RadPanelBar is not there anymore.
I am trying to do something similar, but in your sample each time I collapse the left side and open it back up the RadPanelBar is not there anymore.
0
Christopher Bishop
Top achievements
Rank 2
Rank 2
answered on 03 Jan 2010, 06:56 PM
| <telerik:RadSplitter LiveResize="true" ResizeWithBrowserWindow="true" VisibleDuringInit="false" Width="100%" Height="100%" HeightOffset="20" id="mc" runat="server" Orientation="Horizontal"> |
| <telerik:RadPane BorderStyle="None" id="toppane" runat="server" scrolling="none" Height="56"> |
| TOP HEADER |
| </telerik:RadPane> |
| <telerik:RadPane BorderStyle="None" id="bodypane" runat="server" scrolling="none"> |
| <telerik:RadSplitter ResizeMode="Proportional" VisibleDuringInit="false" Width="100%" Height="100%" id="mbp" runat="server" Orientation="Vertical"> |
| <telerik:RadPane runat="server" ID="lmc" Scrolling="None" Width="160"> |
| LEFT NAVIGATION PANE |
| </telerik:RadPane> |
| <telerik:RadSplitBar CollapseMode="Forward" runat="server" id="lsb" /> |
| <telerik:RadPane width="50%" runat="server" ID="rbc" Scrolling="None"> |
| BODY PANE 1 |
| </telerik:RadPane> |
| <telerik:RadPane width="50%" runat="server" ID="helpPane" Scrolling="None"> |
| BODY PANE 2 |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
with a fluid layout you would need to apply some parent css like
| html,form,body { |
| margin:0px; |
| padding:0px; |
| height:100%; |
| width:100%; |
| overflow:hidden; |
| } |
0
Shane Grant
Top achievements
Rank 1
Rank 1
answered on 04 Jan 2010, 05:07 AM
Here is a fluid layout page I was able to get working pretty good:
I hope it helps somebody out.
| <!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>Test Page</title> |
| <link href="Styles/styles.css" rel="stylesheet" type="text/css" /> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Web20"> |
| <div style="height: 100%;"> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%"> |
| <telerik:RadPane runat="server" ID="leftPane" Width="220px" MinWidth="220" MaxWidth="400" |
| Scrolling="None" > |
| <telerik:RadDockZone ID="dockZoneLeftSideBar" runat="server" Orientation="Vertical" |
| Height="100%"> |
| <telerik:RadDock ID="RadDock5" runat="server" EnableRoundedCorners="true" Title="Dock Left Sidebar" |
| DockMode="Docked" Width="200px"> |
| <ContentTemplate> |
| This pane is 200px wide. |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadPane> |
| <telerik:RadSplitBar runat="server" ID="splitBarMainLeft" CollapseMode="Forward" /> |
| <telerik:RadPane runat="server" ID="paneCenter" Scrolling="None"> |
| <telerik:RadSplitter ID="topContent" runat="server" Orientation="Horizontal"> |
| <telerik:RadPane ID="topPane" runat="server" Scrolling="None"> |
| <telerik:RadDockZone ID="zoneTop" runat="server" Orientation="Vertical" Height="100%"> |
| <telerik:RadDock ID="RadDock4" runat="server" EnableRoundedCorners="true" Title="Dock Top" |
| DockMode="Docked" Width="100%"> |
| <ContentTemplate> |
| Started in top zone |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="splitBarContent" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="middlePane" runat="server"> |
| <telerik:RadSplitter ID="middleContent" runat="server" Orientation="Vertical"> |
| <telerik:RadPane ID="middleLeftPane" runat="server" Scrolling="None"> |
| <telerik:RadDockZone ID="zoneLeft" runat="server" Orientation="Vertical" Height="100%"> |
| <telerik:RadDock ID="RadDock1" runat="server" Resizable="true" EnableRoundedCorners="true" |
| Title="Dock Left" DockMode="Docked"> |
| <ContentTemplate> |
| Started in left zone |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="splitBarMiddleContent" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="middleRightPane" runat="server" Scrolling="None"> |
| <telerik:RadDockZone ID="zoneRight" runat="server" Orientation="Vertical" Height="100%"> |
| <telerik:RadDock ID="RadDock3" runat="server" Resizable="true" EnableRoundedCorners="true" |
| Title="Dock Right" DockMode="Docked"> |
| <ContentTemplate> |
| Lorem Ipsum Dolar |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="splitBarContent2" runat="server" CollapseMode="Both" /> |
| <telerik:RadPane ID="bottomPane" runat="server"> |
| <telerik:RadDockZone ID="zoneBottom" runat="server" Orientation="Vertical" Height="100%"> |
| <telerik:RadDock ID="RadDock2" runat="server" Resizable="true" EnableRoundedCorners="true" |
| Title="Dock Bottom" DockMode="Docked" Width="100%"> |
| <ContentTemplate> |
| Lorem Ipsum Dolar |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="splitBarMainRight" runat="server" CollapseMode="Backward" /> |
| <telerik:RadPane ID="rightPane" runat="server" Width="220" MinWidth="220" MaxWidth="400" |
| Scrolling="None"> |
| <telerik:RadDockZone ID="dockZoneRightSideBar" runat="server" Orientation="Vertical" |
| Height="100%"> |
| <telerik:RadDock ID="RadDock6" runat="server" EnableRoundedCorners="true" Title="Dock Right Sidebar" |
| DockMode="Docked"> |
| <ContentTemplate> |
| Lorem Ipsum Dolar |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </div> |
| </telerik:RadDockLayout> |
| </form> |
| </body> |
| </html> |
I hope it helps somebody out.