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

[Solved] 100% height in FF3

2 Answers 219 Views

Splitter

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

Dan asked on 23 Jun 2008, 01:23 PM

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 Answers, 1 is accepted

Accepted

answered on 25 Jun 2008, 04:03 PM

Default.zip

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%;  
        
                  margin: 0px;  
        
                  padding: 0px;  
        
                  overflow: hidden;  
        
                }  
        
                </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