Filling a DIV with a RadDock

9 posts, 0 answers
  1. JMKeynes
    JMKeynes avatar
    7 posts
    Member since:
    Feb 2007

    Posted 23 Nov 2009 Link to this post

    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.





  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 26 Nov 2009 Link to this post

    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">
    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JMKeynes
    JMKeynes avatar
    7 posts
    Member since:
    Feb 2007

    Posted 27 Nov 2009 Link to this post

    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
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 01 Dec 2009 Link to this post

    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.
  6. JMKeynes
    JMKeynes avatar
    7 posts
    Member since:
    Feb 2007

    Posted 01 Dec 2009 Link to this post

    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
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 03 Dec 2009 Link to this post

    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">
    <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.
  8. Shane Grant
    Shane Grant avatar
    20 posts
    Member since:
    Dec 2009

    Posted 01 Jan 2010 Link to this post

    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.
  9. Christopher Bishop
    Christopher Bishop avatar
    50 posts
    Member since:
    May 2008

    Posted 03 Jan 2010 Link to this post

                <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;  
  10. Shane Grant
    Shane Grant avatar
    20 posts
    Member since:
    Dec 2009

    Posted 03 Jan 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017