Another 100% height problem

3 posts, 0 answers
  1. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2009 Link to this post

    Hi,
    I have a splitter with two Panes on my page and depending on how much content there is in it I want the splitter to expand completely to prevent a scroll in one of the panes.
    It almost work if I set the height of the html, body, form and the splitter tags to 100%.
    The problem is when there is more content in one of the panes then the browser window height (100%), then the pane adds a scroll so I get two scrolls, one in the pane and one in the browser. And I just want the browser scroll!

    So I tried to replace every height:100% from the html to the splitter tags to min-height:100% instead with no success.

    Maybe I missed some property but is it possible to remove the panes scrolls and have the splitter to min-height:100% because I want the splitter to show to the bottom of the page even if there isn't so much content.

    Some example code:
    <html> 
    <head> 
         <style type="text/css"
              html, body, form, .radSplitter, .radSplitterMain, .radSplitterNews { min-height:100% } 
         </style> 
    </head 
    <body> 
         <div style="min-height:100%"
            <telerik:RadSplitter ID="RadSplitter1" Runat="server" CssClass="radSplitter"  
             ResizeWithParentPane="False" VisibleDuringInit="false" Width="100%" 
            PanesBorderSize="0" BorderSize="0"
            <telerik:RadPane id="MainPane" runat="server" BorderWidth="0" CssClass="radSplitterMain"
                text, text, a lot of text!!! 
            </telerik:RadPane> 
            <telerik:RadSplitBar id="RadSplitbar1" runat="server" CollapseMode="Backward"></telerik:RadSplitBar> 
            <telerik:RadPane id="RightPane" runat="server" width="200" Scrolling="None" BorderWidth="0" CssClass="radSplitterNews"
                text, text 
            </telerik:RadPane> 
            </telerik:RadSplitter> 
         </div> 
    </body> 
    </html> 


    Regards,
    Mattias
  2. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2009 Link to this post

    Hi again,

    I saw that I didn't set Scrolling="None" on the MainPane and after setting that the scroll disappears, thats good! :)
    But:
    The splitter stays at the (I guess) default height of 400px so it clips the content straight off!? Not good! :(
    It feels like this is something that can be solved, can you guys figure out a way to set the splitter of min-height 100% of the window?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Sep 2009 Link to this post

    Hello Mattias,

    In order to correctly configure the RadSplitter to occupy 100% of the screen and to have only a single scrollbar when needed, please modify your code in the following manner:

    <html> 
    <head> 
        <style type="text/css">    
         html, body, form  
         {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
            overflow: hidden;  
         }  
         </style> 
    </head> 
    <body> 
        <div style="height: 100%">  
            <telerik:RadSplitter ID="RadSplitter1" runat="server" CssClass="radSplitter" ResizeWithParentPane="False" 
                VisibleDuringInit="false" Width="100%" PanesBorderSize="0" BorderSize="0" Height="100%">  
                <telerik:RadPane ID="MainPane" runat="server" BorderWidth="0" CssClass="radSplitterMain">  
                    text, text, a lot of text!!!  
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Backward"></telerik:RadSplitBar> 
                <telerik:RadPane ID="RightPane" runat="server" Width="200" Scrolling="None" BorderWidth="0" 
                    CssClass="radSplitterNews">  
                    text, text  
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </div> 
    </body> 
    </html> 

    An online example which demosntrates this approach is available below:

    http://demos.telerik.com/aspnet-ajax/splitter/examples/resizewithwindow/defaultcs.aspx

    Kind regards,
    Svetlina
    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.
Back to Top