help with RadDockLayout to consume entire browser window

2 posts, 0 answers
  1. Greg
    Greg avatar
    13 posts
    Member since:
    Oct 2008

    Posted 08 Oct 2009 Link to this post

    I am attempting to fill the entire browser window which I want to shrink or expand as browser window is resized.  I have 2 RadDocks with a smaller one on the top (containing combo boxes), and a larger one one the bottom containing a grid.  The problem I have is that no matter what I have tried, the RadDockLayout does not stretch to consume 100% height (the width works fine).  What am I missing?  See the html below that I am using.  The only thing that has worked for a 1 size of browser window is setting the height (see bold below) on the  RadDock2, but this is not the desired effect.  Placing height at 100% does not work for me.  Seems 100% really means 75% internally (or that is how it looks).  This is in a content page where the master page has a title and menu on top of page.

    <telerik:RadDockLayout ID="RadDockLayout1" runat="server" >
    <center>
     <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="98%">
      <telerik:RadDock ID="RadDock1" runat="server">
       <Commands>
        <telerik:DockExpandCollapseCommand />
       </Commands>
       <ContentTemplate>
         <!-- contains labels and combo boxes -->
       </ContentTemplate> 
      </telerik:RadDock>
      
      <telerik:RadDock ID="RadDock2" runat="server" Height="650px" >
      <Commands>
       <telerik:DockExpandCollapseCommand />
      </Commands>
      <ContentTemplate>
       <!-- contains grid -->
      </ContentTemplate>
      </telerik:RadDock>
     </telerik:RadDockZone>
    </center> 
    </telerik:RadDockLayout>
  2. Jim
    Jim avatar
    31 posts
    Member since:
    Jun 2009

    Posted 12 Oct 2009 Link to this post

    Dock is rendered as a <div> element.

    Try setting hegiht:100% to a <div> and you will see that it is not applied if the parent element does not have a height: value.

    <!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"
        <div style="border: solid 1px Red; width: 100%; min-height: 300px;"
        </div> 
        </form> 
    </body> 
    </html> 
     

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top