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

help with RadDockLayout to consume entire browser window

1 Answer 74 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 08 Oct 2009, 09:14 PM
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>

1 Answer, 1 is accepted

Sort by
0
Jim
Top achievements
Rank 1
answered on 12 Oct 2009, 01:58 PM
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> 
 

Tags
Dock
Asked by
Greg
Top achievements
Rank 1
Answers by
Jim
Top achievements
Rank 1
Share this question
or