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

The 'problem' with Free sizes

4 Answers 139 Views

Splitter

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

Dan asked on 01 May 2008, 03:49 PM

If you design a splitter layout you have to set the size of the panes to something specific to get something you want. If you leave the sizes unset then the panes are just sized in proportion; if you have 2 panes, each one will be around half the size of the splitter.

I have a setup that I'm working on ATM where I have a 'header', 'body' and 'footer' if you like. My 'body' section will always be a grid. I'm happy for the user to have to scroll the grid to see the data, but I want the 'header' and 'footer' to stay fixed. At the same time I want the maximum amount of screen available for my grid.

In an ideal world you'd be able to mark one or more panes to resize automagically according to their content, will maybe a maximum and minimun size for them. Any other panes in the splitter would automagically resize to use the available space.

Sadly the world is not an ideal place. Below is an example page that splits the screen in to 3. The top and bottom panes are resized to the height of the content and the middle pane is itself resized to use the rest of the space.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestBed.WebForm1" %> 
        
            <%@ 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>Untitled Page</title> 
        
                <style type="text/css"> 
        
                  html, body, form { 
        
                    width:100%; 
        
                    height:100%; 
        
                    padding:0; 
        
                    border:0; 
        
                    margin:0; 
        
                  } 
        
                </style> 
        
              </head> 
        
              <body scroll="no"> 
        
                <form id="form1" runat="server"> 
        
                  <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                  </telerik:RadScriptManager> 
        
                  <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                  <script type="text/javascript"> 
        
                    function resize(sender) { 
        
                      var splitter = $find("<%= RadSplitter1.ClientID %>"); 
        
                      var pane1 = splitter.getPaneById("RadPane1"); 
        
                      var pane2 = splitter.getPaneById("RadPane2"); 
        
                      var pane3 = splitter.getPaneById("RadPane3"); 
        
                      var splittersplitterHeight = splitter.getInnerHeight(); 
        
                      var h1 = pane1.getVarSize();  
        
                      var h2 = pane2.getVarSize(); 
        
                      var h3 = pane3.getVarSize(); 
        
                      var pane1ContentHeight = document.getElementById("content1").offsetHeight; 
        
                      var pane3ContentHeight = document.getElementById("content3").offsetHeight; 
        
                      var offset = 33; 
        
                      var newH1 = ((pane1ContentHeight + offset) > splitterHeight/3) ? splitterHeight/3 : pane1ContentHeight + offset; 
        
                      var newH3 = ((pane3ContentHeight + offset) > splitterHeight/3) ? splitterHeight/3 : pane3ContentHeight + offset; 
        
                      var newH2 = h2 + (h1 - newH1) + (h3 - newH3); 
        
                      pane1.setVarSize(newH1); 
        
                      pane2.setVarSize(newH2); 
        
                      pane3.setVarSize(newH3); 
        
                    } 
        
                  </script> 
        
                  </telerik:RadCodeBlock> 
        
                  <telerik:RadSplitter ID="RadSplitter1" runat="server"  
        
                    Orientation="Horizontal"  
        
                    Width="100%"  
        
                    Height="100%"  
        
                    OnClientLoaded="resize"  
        
                    OnClientResized="resize"> 
        
                    <telerik:RadPane ID="RadPane1" runat="server"> 
        
                      <div id="content1"> 
        
                        <p>Ullamcorper pretium suscipit scelerisque.</p> 
        
                      </div> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadPane ID="RadPane2" runat="server"> 
        
                      <div id="content2"> 
        
                        <p>Lorem ipsum dolor sit amet consectetuer In nunc interdum elit eu. Sem quis at tincidunt semper mauris at nascetur risus vitae porta. Elit lorem eros Morbi quam semper est amet porttitor Phasellus justo. Lorem velit convallis Nullam sagittis non sem netus magnis Mauris eu. Semper elit a Proin tellus dui ac id lacus justo Fusce. Quis Aenean ridiculus lacus.</p> 
        
                        <p>Ullamcorper pretium suscipit scelerisque vestibulum tellus Phasellus semper condimentum pede Aliquam. Tellus justo gravida hac sodales fringilla sollicitudin at orci sem at. Eu sit elit cursus adipiscing et urna elit mus metus a. Felis semper facilisi vitae nisl auctor facilisi suscipit fames vitae cursus. Justo id massa In in pede orci.</p> 
        
                        <p>Tincidunt dictum sagittis mi dictum vitae semper suscipit nunc Ut ipsum. Lorem ut Vestibulum wisi eget Quisque consequat Vestibulum lorem nibh id. Et fringilla malesuada at hendrerit elit ac Nam Proin interdum vel. Velit id condimentum lorem risus vitae mus et semper Vivamus Integer. Sagittis non consequat Phasellus consequat fringilla sem velit Ut vitae Curabitur. Pellentesque.</p> 
        
                        <p>Et elit ut dictumst ipsum quis malesuada lorem vitae est Vivamus. Adipiscing orci eu elit nibh Pellentesque eros ante elit nisl morbi. Vel convallis semper nec congue In Aenean condimentum Nulla Lorem cursus. Eu pellentesque penatibus leo eget amet ornare Pellentesque sit adipiscing quis. Risus congue tortor cursus et orci ipsum fermentum felis Phasellus auctor. Pretium In ipsum.</p> 
        
                        <p>Euismod Pellentesque urna ut ut vitae Sed tincidunt platea Nulla risus. Sit Vestibulum id purus quis senectus orci Nunc ut Phasellus justo. Id est Vivamus justo eget morbi laoreet leo nascetur Pellentesque Vestibulum. Nonummy pellentesque enim ipsum et elit justo Mauris venenatis wisi Pellentesque. Netus vitae Nullam laoreet neque fringilla felis consectetuer elit eu interdum. Phasellus nec Curabitur pretium turpis ipsum tincidunt.</p> 
        
                        <p>Habitasse sit Vestibulum dolor id consequat vitae convallis interdum hendrerit est. Leo velit mauris semper magnis sit Nulla tempor pede non mollis. Hendrerit dignissim magna at lorem et Aenean Sed adipiscing eros sed. Nam pretium quis augue Vestibulum et metus Pellentesque gravida nulla sed. Eros Aenean et In fringilla ut cursus In amet Praesent sem. Ut euismod Fusce non habitasse Nam In amet.</p> 
        
                      </div> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadPane ID="RadPane3" runat="server"> 
        
                      <div id="content3"> 
        
                        <p>Lorem ipsum dolor sit amet consectetuer In nunc interdum elit eu. Sem quis at tincidunt semper mauris at nascetur risus vitae porta. Elit lorem eros Morbi quam semper est amet porttitor Phasellus justo. Lorem velit convallis Nullam sagittis non sem netus magnis Mauris eu. Semper elit a Proin tellus dui ac id lacus justo Fusce. Quis Aenean ridiculus lacus.</p> 
        
                      </div> 
        
                    </telerik:RadPane> 
        
                  </telerik:RadSplitter> 
        
                </form> 
        
              </body> 
        
            </html>

Some points to note.

I originally thought to use the pane's getContentElement()'s offsetHeight property to find the height of the content, but it appears that that value represents the inner height of the pane and not really the content itself.
You have to expressly set the heights of all of the panes; just changing the height of the first and last will leave a gap on the screen.
I've only got very arbitrary settings for a max size of the upper and lower panes.
The 'offset' variable is to account for some hidden space that each pane needs. I don't know what it is, but set this figure lower than 33 and you'll end up with scrollbars on your upper and lower panes when you shouldn't.

I don't know that it would be that difficult for the boys and girls at telerik towers to build something in to the pane object to allow this kind of thing to happen without user code, but until then we have to do it ourselves.

I hope that this helps someone.

4 Answers, 1 is accepted

Accepted

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

The 'problem' with Free sizes

4 Answers, 1 is accepted