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" >
     <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="98%">
      <telerik:RadDock ID="RadDock1" runat="server">
        <telerik:DockExpandCollapseCommand />
         <!-- contains labels and combo boxes -->
      <telerik:RadDock ID="RadDock2" runat="server" Height="650px" >
       <telerik:DockExpandCollapseCommand />
       <!-- contains grid -->
  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" ""> 
    <html xmlns=""
    <head runat="server"
    <body style="height: 100%;"
        <form id="form1" runat="server"
        <div style="border: solid 1px Red; width: 100%; min-height: 300px;"

Back to Top