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

Pane will not show in FF

3 Answers 103 Views

Splitter

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

Officialboss asked on 22 Jan 2009, 06:31 PM

Hello,
I am having trouble displaying the splitter without borders with scroll bars to fit within the browser window. I want the pane to size with the window size. Can anyone look at my code and see where I am going wrong?
I have tried everything that I have found on these forums.
IE6 shows the panes and text but the browser has both scroll bars.
FF3 display the splitter bar only at about 40px high and the text in the paragraphs disappears right after the page has loaded.
Thanks
MasterPage

    
            <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="MasterPages_Main" %> 
        
            <!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> 
        
                 <style type="text/css"> 
        
                 #mainpage { position:relative; z-index:100000; } 
        
                 #headersection { width: 99%; } 
        
                    </style> 
        
                <asp:ContentPlaceHolder id="head" runat="server"> 
        
                </asp:ContentPlaceHolder> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> 
        
                <div id="mainpage"> 
        
                <div id="headersection"> 
        
                Page Header 
        
                </div> 
        
                    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">         
        
                    </asp:ContentPlaceHolder> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Splitter.aspx

    
            <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Main.master" AutoEventWireup="true" CodeFile="Splitter.aspx.cs" Inherits="Splitter" %> 
        
            <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
        
            </asp:Content> 
        
            <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
        
            <div style="border: solid 1px #00ff00; height:100%; margin: 0px; padding: 0px;  
        
            overflow: hidden;"> 
        
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="Outlook" height="100%" width="100%" 
        
            BorderSize="0" BorderWidth="0" OnClientLoaded=""> 
        
            <telerik:RadPane ID="Pane1" runat="server" Scrolling="Y" MinHeight="85" width="225px"> 
        
            <div> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hhgggggggg</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            </div>dee 
        
            </telerik:RadPane> 
        
            <telerik:RadSplitBar ID="Splitter1" runat="server" CollapseMode="Forward"  
        
            CollapseExpandPaneText="Collapse/Expand Summary and Alerts" /> 
        
            <telerik:RadPane ID="Pane2" runat="server" >sd 
        
            </telerik:RadPane>                     
        
            </telerik:RadSplitter> 
        
            </div> 
        
            </asp:Content>

3 Answers, 1 is accepted

answered on 22 Jan 2009, 11:12 PM

After several days of debugging this I found out that adding BorderSize="0" to the RadSplitter shrinks both panes to the 40px height and the text within is hidden.

This is how the source looks like:

    
            <div style="border: solid 1px #00ff00; height:100%; margin: 0px; padding: 0px;  
        
            overflow: hidden;"> 
        
            <div id="ctl00_ContentPlaceHolder1_RadSplitter1"  style="width:100%;height:100%;"><div><table id="RAD_SPLITTER_ctl00_ContentPlaceHolder1_RadSplitter1" class="RadSplitter_Outlook" cellpadding="0" cellspacing="0" style="width:1px;height:1px;visibility:visible;border-width:0px;"> 
        
                <tr> 
        
                    <!-- 2008.2.826.35 --><td id="ctl00_ContentPlaceHolder1_Pane1" valign="top" class="pane firstItem" style="border-width:0px;"><div id="RAD_SPLITTER_PANE_CONTENT_ctl00_ContentPlaceHolder1_Pane1"  style="width:225px;overflow-y:auto;overflow-x:hidden;"> 
        
            <div> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hhgggggggg</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            <p>hh</p> 
        
            </div>dee 
        
            </div><input id="ctl00_ContentPlaceHolder1_Pane1_ClientState" name="ctl00_ContentPlaceHolder1_Pane1_ClientState" type="hidden" /></td><td id="ctl00_ContentPlaceHolder1_Splitter1" class="resizeBar" style="width:1px;"><div id="RAD_SPLITTER_BAR_COLLAPSE_WRAPPER_ctl00_ContentPlaceHolder1_Splitter1" class="collapseBarWrapper"> 
        
                        <div id="RAD_SPLITTER_BAR_COLLAPSE_Forward_ctl00_ContentPlaceHolder1_Splitter1" class="collapseBarCollapse" title="Collapse/Expand Summary and Alerts"> 
        
                            <!-- / --> 
        
                        </div> 
        
                    </div><input id="ctl00_ContentPlaceHolder1_Splitter1_ClientState" name="ctl00_ContentPlaceHolder1_Splitter1_ClientState" type="hidden" /></td><td id="ctl00_ContentPlaceHolder1_Pane2" valign="top" class="pane lastItem" style="border-width:0px;"><div id="RAD_SPLITTER_PANE_CONTENT_ctl00_ContentPlaceHolder1_Pane2"  style="overflow:auto;">sd 
        
            </div><input id="ctl00_ContentPlaceHolder1_Pane2_ClientState" name="ctl00_ContentPlaceHolder1_Pane2_ClientState" type="hidden" /></td> 
        
                </tr> 
        
            </table><input id="ctl00_ContentPlaceHolder1_RadSplitter1_ClientState" name="ctl00_ContentPlaceHolder1_RadSplitter1_ClientState" type="hidden" /></div></div> 
        
            </div>

i do have the following in my css

    
            html, body, form   
        
                {   
        
                   height: 100%;   
        
                   padding: 0px;   
        
                   margin: 0px;   
        
                }

Accepted

answered on 23 Jan 2009, 07:55 AM

Hello,
The problem in the code that you originally posted is that you have not configured the page correctly for the splitter (or any HTML element) to occupy 100% of the height of the page. However, you mention that you have added height for the HTML, BODY and FORM elements. You actually have to set the height for the DIV with id="mainpage" as well, because it is a parent of the splitter as well. As soon as I configured those elements, the splitter became as high as the viewport of the browser:

    
            html, body, form, 
        
            #mainpage 
        
            {    
        
               height: 100%;    
        
               padding: 0px;    
        
               margin: 0px;    
        
            }

At this point, you get scrollbars because you have not only a splitter, but text above the splitter as well, which has a height of its own. Please review our Making RadSplitter occupy part of a page with variable size online article. Please note that in order to get the expected result, you have to remove the following DIV element, as it does not have a HeightOffset property:

    
            <div style="border: solid 1px #00ff00; height:100%; margin: 0px; padding: 0px;   
        
            overflow: hidden;">

I would also recommend that you update your version to the latest version of the RadControls for ASP.NET AJAX suite (2008.3 1314.35), as I noticed that you use an old version - 2008.2.826.35.

Kind regards,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.