Pane will not show in FF

4 posts, 1 answers
  1. Officialboss
    Officialboss avatar
    43 posts
    Member since:
    Jan 2008

    Posted 22 Jan 2009 Link to this post

    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> 
     
     
  2. Officialboss
    Officialboss avatar
    43 posts
    Member since:
    Jan 2008

    Posted 22 Jan 2009 Link to this post

    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%;   
           padding0px;   
           margin0px;   
        }   

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 23 Jan 2009 Link to this post

    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%;    
       padding0px;    
       margin0px;    

    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.
  5. Officialboss
    Officialboss avatar
    43 posts
    Member since:
    Jan 2008

    Posted 23 Jan 2009 Link to this post

    Tsveti,

    Thank you for the detailed answer. You set  me off in the right direction and adjusting the styles in my nested container div's I was able to get it right.

    Thanks! :-)
Back to Top