Splitter width and border

2 posts, 0 answers
  1. Albert Shenker
    Albert Shenker avatar
    550 posts
    Member since:
    Mar 2004

    Posted 07 Dec 2008 Link to this post

    I have the following markup. I would like there to be a 5px border surrounding the "content" (see the inner splitter) which should fill the available space. I have the page containers set to height/width = 100%. For some reason the border disappears off the right and bottom edge. I thought this might be the old IE 6 box model issue, but this occurs in IE7 and Firefox 3 as well. Can anyone tell me what I'm doing wrong?

    <!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" style="height: 100%; min-height: 100%;">  
    <head id="Head1" runat="server">  
        <title></title>  
        </head> 
    <body style=width: 100%; height: 100%; text-align: center; margin:0px; background-color: #0A3152;> 
          
        <form id="Form1" runat="server" style="height:100%; width:100%;">  
              
            <div style="margin: 0px auto;width: 900px;height:100%;text-align: center;">  
                <div style="height:100%;width:100%;margin: auto;> 
                    <telerik:RadSplitter ID="rsAM"   
                                        runat="server"   
                                        Width="100%"   
                                        Height="100%"   
                                        Orientation="Horizontal"   
                                        ResizeWithParentPane="False"   
                                        HeightOffset="0"   
                                        BorderSize="0" 
                                        VisibleDuringInit="False" 
                                        Skin="Hay" 
                    > 
                        <telerik:radpane runat="server" id="hPane" Scrolling="None" Width="100%" Height="79px">  
                            Header  
                        </telerik:radpane> 
                        <telerik:radpane runat="server" id="npane" Scrolling="None" Width="100%" Height="24px" > 
                            Navbar                    </telerik:radpane> 
                        <telerik:radpane runat="server" id="bPane" Scrolling="None" Height="100%" Width="100%"   
                                <telerik:RadSplitter ID="rsB"   
                                        runat="server"   
                                        Width="100%"   
                                        Height="100%"   
                                        Orientation="Vertical"   
                                        ResizeWithParentPane="True"   
                                        HeightOffset="0"   
                                        BorderSize="0" 
                                        VisibleDuringInit="False" 
                                        Skin="Hay" 
                                        > 
                                    <telerik:radpane runat="server" id="blPane" Scrolling="None" Width="21px" Height="100%"></telerik:radpane> 
                                    <telerik:radpane runat="server" id="bcPane" Scrolling="None" Height="100%" Width="100%">  
                                          
                                            <div style="height:100%; width:100%;border: solid 5px red;">  
    Content... This should have a red border of 5px around it but the border disappears on the right and bottom. I also need this to fill the available space, hense the 1005 height/width  
                                                                                      </div> 
                                    </telerik:radpane>   
                                    <telerik:radpane runat="server" id="brPane" Scrolling="None" Width="16px" Height="100%"></telerik:radpane>     
                                </telerik:RadSplitter>   
                        </telerik:radpane> 
                        <telerik:radpane runat="server" id="fspane" Scrolling="None" Height="8px" Width="100%">  
                             Footer Spacer  
                        </telerik:radpane> 
                        <telerik:radpane runat="server" id="fPane" Scrolling="None" Height="29px" Width="100%">  
                             Footer  
                        </telerik:radpane> 
                    </telerik:RadSplitter> 
                </div> 
            </div> 
              
        </form> 
    </body> 
    </html> 
  2. Martin
    Admin
    Martin avatar
    585 posts

    Posted 09 Dec 2008 Link to this post

    Hi Albert,

    Actually, the behavior you are experiencing is the right box model behavior, which was "mistaken" in the old versions of Internet Explorer. Unfortunately, this is not a bug, but a correct layout. In brief, the height and width of the correct box model consists of width of the element, its border width and its padding. If an object is high and wide 100%, has a 5 pixels border and 10 pixels padding, its offsetWidth and offsetHeight are a sum of these 100% + its padding + its border width. The 100% is still 100%, but not of its CSS width and height, but its offsetWidth and offsetHeight.

    To put things to work you need to use some JavaScript - get the offsetWidth and offsetHeight of the element in pixels, then subtract its doubled border and doubled padding.

    The layout you are trying to create cannot be achieved with pure CSS.

    Here is an article about the box model from W3C.

    Sincerely yours,
    Martin Ivanov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top