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

Filling a DIV with a RadDock

8 Answers 261 Views

Dock

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

JMKeynes asked on 24 Nov 2009, 05:50 AM

conceptual.jpg

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:

    
            <!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

answered on 26 Nov 2009, 02:24 PM

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:

<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 />

CONTENT

<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 />

CONTENT

<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.

answered on 03 Dec 2009, 09:36 AM

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:

<%@ 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.

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;  
        
            }

answered on 04 Jan 2010, 05:07 AM

Here is a fluid layout page I was able to get working pretty good:

    
            <!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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Filling a DIV with a RadDock

8 Answers, 1 is accepted