100% height in FF3

3 posts, 1 answers
  1. Dan
    Dan avatar
    739 posts
    Member since:
    Mar 2009

    Posted 23 Jun 2008 Link to this post

    I have a page that has a splitter on it designed to occupy 100% of the browser's height and width.

    This page works fine in FF2 and IE6 & 7.

    With FF3 though, I occasionally get scrollbars in the browser; not in one pane or the other, but fort the whole browser window (like you might expect to see if you didn't put scroll="no" in the <body> tag in IE.

    If I make small adjustments to the browser window side then they disappear and then come back with the next resize.

    If it makes any difference, the left hand pane contains a Panelbar which is resized on the Splitter Pane's onClientLoaded and onClientResized events using the following ...
            function SetNavHeight(sender, args) { 
              setTimeout(function() { 
                var navPane = sender.getPaneById("NavPane"); 
                var containerHeight = navPane.get_height(); 
                var panelBar = $find("<%=pb.ClientID %>"); 
                panelBar.get_element().style.height = containerHeight + "px"
                panelBar.repaint(); 
              }, 200) 
            } 

    --
    Stuart
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 25 Jun 2008 Link to this post

    Hello Stuart,

    I tested the described setup but I was able to reproduce the reported behavior only when I have body scroll=no and no setting for overflow:hidden.

    Please, note that the scroll=no setting removes the scrollbars only under IE and in order to achieve the same under FF you should use the overflow: hidden setting as shown in our examples for RadSplitter for ASP.NET here.

    This being said you can achieve the desired behavior by using the following line:

    <body scroll=no style="overflow:hidden;"

    but when using XHTML mode it is much better to use this style:

    <style type="text/css">  
        html, body, form  
        {  
          height: 100%;  
          margin0px;  
          padding0px;  
          overflowhidden;  
        }  
        </style> 

    For your convenience I attached my test project.

    In case I have not understand you correctly, please open a new support ticket and send me a sample reproduction project along with a video capture of the exact steps I need to follow. Once I receive it, I will do my best to help.



    Best wishes,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Dan
    Dan avatar
    739 posts
    Member since:
    Mar 2009

    Posted 25 Jun 2008 Link to this post

    My Dearest Svetlina,

    You have always been my favourite. You've solved my little problem.

    Bless you.

    Love and kisses,

    --
    Stuart
Back to Top