RadDock seems to have a float Issue

3 posts, 0 answers
  1. Andy
    Andy avatar
    18 posts
    Member since:
    Apr 2011

    Posted 05 Oct 2011 Link to this post

    Hi,

    I have a RadMultipage containing several RadPageViews.  Each PageView contains a RadDockLayout. Each RadDockLayout contains a RadSplitter.  Each RadSplitter contains three RadPanes each of which contains a RadDockZone. The RadSplitter displays the panes horizontally

    When the page initially displays the first PageView is selected (SelectedIndex = 0).  However, each of the RadDockZones have no content, as expected.  I dynamically add a RadDock to the first DockZone. That DockZone and its content are displayed lower than the other two dockzones (erroneously).  I want the three dockzones to display horizontally with alignment at the top of the RadSplitter.

    I have tried everything I can think of.

    Below is the content of the content page (I am using a master page).
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
            <ContentTemplate>
                <div id="PortalContainer"
                    <div class="TabStripContainer">            
                        <telerik:RadTabStrip ID="MyJailTabStrip" runat="server"
                            MultiPageID="RadMultiPage1"
                            CausesValidation="false"                                                     
                            CssClass="MyJailTabStrip"                                                  
                            ontabclick="MyJailTabStrip_TabClick" >
                            <Tabs>
                                <telerik:RadTab Text="Jail" Selected="true"></telerik:RadTab>  
                                <telerik:RadTab Text="Warrants"></telerik:RadTab>
                                <telerik:RadTab Text="Civil Papers"></telerik:RadTab>
                                <telerik:RadTab Text="Dispatch"></telerik:RadTab>             
                            </Tabs>
                        </telerik:RadTabStrip>                                   
                        <div class="clearer"></div>               
                    </div>     
                    <div id="PortalContent" class="RoundedCorners">
                        <div>
                            <asp:Timer ID="Timer1"  runat="server" >
                            </asp:Timer>
                        </div>
                        <telerik:RadMultiPage ID="RadMultiPage1" runat="server"
                            SelectedIndex="0"
                            Width="1188"
                            style="background-color: Black;" >
                            <telerik:RadPageView ID="JailPageView" runat="server"
                                Selected="true" 
                                Width="1188"
                                style="background-color: Aqua;">
                                <telerik:RadDockLayout ID="JailDockLayout" runat="server"
                                    onloaddocklayout="DockLayout_LoadDockLayout"
                                    onsavedocklayout="DockLayout_SaveDockLayout">
                                    <telerik:RadSplitter ID="RadSplitter1" runat="server" 
                                        Width="1188"                                                              
                                        BorderSize="0"                                   
                                        CssClass="RadSplitter">
                                        <telerik:RadPane ID="JailPane1" runat="server" Width="350" >
                                            <telerik:RadDockZone ID="JailDockZone1" runat="server"
                                                CssClass="RadDockZone1 RoundedCorners"                       
                                                BorderWidth="0"                                   
                                                MinHeight="90%"
                                                MinWidth="150" 
                                                Width="300">                              
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
     
                                        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" BorderWidth="0"  Width="10" CssClass="SplitterBar">
                                        </telerik:RadSplitBar>
     
                                        <telerik:RadPane ID="JailPane2" runat="server" Width="350" >
                                            <telerik:RadDockZone ID="JailDockZone2" runat="server"  
                                                CssClass="RadDockZone2 RoundedCorners"                     
                                                BorderWidth="0"                                   
                                                MinHeight="90%"
                                                MinWidth="250" 
                                                Width="300">                                                                                        
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
     
                                        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" BorderWidth="0" Width="10" CssClass="SplitterBar">
                                        </telerik:RadSplitBar>
     
                                        <telerik:RadPane ID="JailPane3" runat="server" Width="350" >
                                            <telerik:RadDockZone ID="JailDockZone3" runat="server"
                                                CssClass="RadDockZone3 RoundedCorners"
                                                BorderWidth="0"                                   
                                                MinHeight="90%"
                                                MinWidth="150" 
                                                Width="300">                               
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
                                    </telerik:RadSplitter>
                                    <div class="clearer"></div>                      
                                </telerik:RadDockLayout>  
                            </telerik:RadPageView>
     
                            <telerik:RadPageView ID="WarrantsPageView" runat="server">
                                <telerik:RadDockLayout ID="WarrantsDockLayout" runat="server" 
                                    onloaddocklayout="DockLayout_LoadDockLayout"
                                    onsavedocklayout="DockLayout_SaveDockLayout">
                                    <telerik:RadSplitter ID="RadSplitter2" runat="server"
                                        Width="1100"                                  
                                        BorderSize="0">
                                        <telerik:RadPane ID="WarrantsPane1" runat="server">
                                            <telerik:RadDockZone ID="WarrantsDockZone1" runat="server"
                                                CssClass="RadDockZone1  RoundedCorners"                       
                                                BorderWidth="0"                                   
                                                MinHeight="92%"
                                                MinWidth="150" 
                                                Width="350">                              
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
                                        <telerik:RadSplitBar ID="RadSplitBar3" runat="server" BorderWidth="0">
                                        </telerik:RadSplitBar>
                                        <telerik:RadPane ID="WarrantsPane2" runat="server">
                                            <telerik:RadDockZone ID="WarrantsDockZone2" runat="server"  
                                                CssClass="RadDockZone2  RoundedCorners"                     
                                                BorderWidth="0"                                   
                                                MinHeight="92%"
                                                MinWidth="250" 
                                                Width="350">   
                                                                                                   
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
                                        <telerik:RadSplitBar ID="RadSplitBar4" runat="server" BorderWidth="0">
                                        </telerik:RadSplitBar>
                                        <telerik:RadPane ID="WarrantsPane3" runat="server" >
                                            <telerik:RadDockZone ID="WarrantsDockZone3" runat="server"
                                                CssClass="RadDockZone3 RoundedCorners"
                                                BorderWidth="0"                                   
                                                MinHeight="92%"
                                                MinWidth="150" 
                                                Width="350">                                
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
                                    </telerik:RadSplitter>                       
                                </telerik:RadDockLayout>   
                            </telerik:RadPageView>
     
     
                            <telerik:RadPageView ID="CivilPapersPageView" runat="server">
                                <telerik:RadDockLayout ID="CivilPapersDockLayout" runat="server" 
                                    onloaddocklayout="DockLayout_LoadDockLayout"
                                    onsavedocklayout="DockLayout_SaveDockLayout">
                                    <telerik:RadSplitter ID="RadSplitter3" runat="server"
                                        Width="1100"                                    
                                        BorderSize="0">
                                        <telerik:RadPane ID="CivilPapersPane1" runat="server">
                                            <telerik:RadDockZone ID="CivilPapersDockZone1" runat="server"
                                                CssClass="RadDockZone1 RoundedCorners"                       
                                                BorderWidth="0"                                   
                                                MinHeight="92%"
                                                MinWidth="150" 
                                                Width="350">                                 
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
                                        <telerik:RadSplitBar ID="RadSplitBar5" runat="server" BorderWidth="0" >
                                        </telerik:RadSplitBar>
                                        <telerik:RadPane ID="CivilPapersPane2" runat="server" >
                                            <telerik:RadDockZone ID="CivilPapersDockZone2" runat="server"  
                                                CssClass="RadDockZone2 RoundedCorners"                     
                                                BorderWidth="0"                                   
                                                MinHeight="92%"
                                                MinWidth="250" 
                                                Width="350">                                                                                       
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
                                        <telerik:RadSplitBar ID="RadSplitBar6" runat="server" BorderWidth="0">
                                        </telerik:RadSplitBar>
                                        <telerik:RadPane ID="CivilPapersPane3" runat="server">
                                            <telerik:RadDockZone ID="CivilPapersDockZone3" runat="server"
                                                CssClass="RadDockZone3 RoundedCorners"
                                                BorderWidth="0"                                  
                                                MinHeight="92%"
                                                MinWidth="150"
                                                Width="350">                               
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
                                    </telerik:RadSplitter>                       
                                </telerik:RadDockLayout>   
                            </telerik:RadPageView>
     
     
                            <telerik:RadPageView ID="DispatchPageView" runat="server">
                                <telerik:RadDockLayout ID="DispatchDockLayout" runat="server" 
                                    onloaddocklayout="DockLayout_LoadDockLayout"
                                    onsavedocklayout="DockLayout_SaveDockLayout">
                                    <telerik:RadSplitter ID="RadSplitter4" runat="server"
                                        Width="1100"                                    
                                        BorderSize="0">
                                        <telerik:RadPane ID="DispatchPane1" runat="server">
                                            <telerik:RadDockZone ID="DispatchDockZone1" runat="server"
                                                CssClass="RadDockZone1 RoundedCorners"                       
                                                BorderWidth="0"                                   
                                                MinHeight="92%"
                                                MinWidth="150" 
                                                Width="350">                              
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
                                        <telerik:RadSplitBar ID="RadSplitBar7" runat="server"  >
                                        </telerik:RadSplitBar>
                                        <telerik:RadPane ID="DispatchPane2" runat="server" >
                                            <telerik:RadDockZone ID="DispatchDockZone2" runat="server"  
                                                CssClass="RadDockZone2 RoundedCorners"                     
                                                BorderWidth="0"                                  
                                                MinHeight="92%"
                                                MinWidth="250"
                                                Width="350">  
                                                                                                   
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
                                        <telerik:RadSplitBar ID="RadSplitBar8" runat="server">
                                        </telerik:RadSplitBar>
                                        <telerik:RadPane ID="DispatchPane3" runat="server" >
                                            <telerik:RadDockZone ID="DispatchDockZone3" runat="server"
                                                CssClass="RadDockZone3 RoundedCorners"
                                                BorderWidth="0"                                  
                                                MinHeight="92%"                                           
                                                MinWidth="150"
                                                Width="350">                               
                                            </telerik:RadDockZone>
                                        </telerik:RadPane>
                                    </telerik:RadSplitter>                       
                                </telerik:RadDockLayout>   
                            </telerik:RadPageView>
                        </telerik:RadMultiPage>         
                    </div>
                </div>
                <div class="clearer"></div>
            </ContentTemplate>
            <Triggers>                   
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />                   
            </Triggers>
        </asp:UpdatePanel>

    Here is the applicable CSS.

    .TabStripContainer
    {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;  
        background-color: #E6EFF7;
    }
     
     
    .MyJailTabStrip
    {
        float: left;
     /*   background-color: #E6EFF7;*/
        
    }
    .DashBoardTab
    {
        float: left;
        
    }
     
    .rtsSelected,
    .rtsSelected span
        background: url('../Images/Backgrounds/BodyBackgroundGradient.png') repeat-x !important;
      /*  background:url(../Images/btnUpdate.jpg) no-repeat 0 100%  !important; */
        background-color: #628DB5 !important;
        text-align: center;
        color: #FFFFFF !important;
    }
     
     
    .NewTab,
    .NewTabContainer
    {
        float: left;
        margin-left: 1em;  
    }
     
    .NewTab
    {
      /*  padding-top: .5em;
        font-size: .8em;*/
    }
    .NewTabLink
    {
        float: left;
    }
    #PortalContainer
        margin-top: 0;
        width: 1200px;
        background-color: Red;
    }
    #PortalContent
    {
        width: 1188px;
        padding: 5px;
        background-color: White;   
        margin-left: auto;
        margin-right: auto;
    }
    .MyJailCommandContainer
    {
        padding-bottom: .4em;
        width: 20em;
    }
    .PortalContentWindowContainer
    {
        background-image: url('../Images/Backgrounds/PortalWindowGradient.png');
        background-repeat: repeat-x;
        color: White ;
        overflow: hidden;
        border-bottom-color: Black;
        border-bottom-style: solid;
        border-bottom-width: .2em;
         
    }
    .PortalOptionsWindowContent,
    .PortalContentWindowContent
    {
           padding-bottom: .4em;   
    }
    .PortalButton
    {
        border-style: solid;
        border-width: 1px;
        border-color: #819AD3;
        background-image: url('../Images/Backgrounds/Web20BlueButton.png');
        background-repeat: repeat-x;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-top: .3em;
        padding-bottom: .3em;
        border-top-left-radius: .3em .3em;
        border-top-right-radius: .3em .3em;
        border-bottom-left-radius: .3em .3em;
        border-bottom-right-radius: .3em .3em;
        margin-top: 1em;
    }
    .PortalImDoneButton
    {
        border-style: solid;
        border-width: 1px;
        border-color: #FFC027;
        background-image: url('../Images/Backgrounds/PortalButtonGradient.png');
        background-repeat: repeat-x;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-top: .3em;
        padding-bottom: .3em;
        border-top-left-radius: .3em .3em;
        border-top-right-radius: .3em .3em;
        border-bottom-left-radius: .3em .3em;
        border-bottom-right-radius: .3em .3em;
    }
     
    .rwWindowContent
    {
        background-image: url('../Images/Backgrounds/BodyBackgroundGradient.png');
        background-repeat: repeat-x;
        color: White !important;
        background-color: #628DB5 !important;
     
    }
     
     
    .PortalWindowContent
    {
        width: 47em;
        margin-left: 25em;
        text-align: left;
    }
    /*-------------------------------------------------------------------------------*/
    /* Content Adder                                                                 */
    /*-------------------------------------------------------------------------------*/
    .ContentAdderContainer
    {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
     
    .ContentAdderContent
    {
        padding-left: .5em;
        margin-left: 1.5em;
    }
    .ContentAdderListView
    {
        width: 47em;
        max-width: 47em;
    }
    #ContentAdderDataPagerPanel
    {
        width: 47em;
    }
    .ContentAdderDataPager
    {  
        width: 17em;
        margin-top: .8em;
        float: right;
    }
    .ImDoneButtonContainer
    {
        float: left;
        vertical-align: top;
        margin-right: 2em;
        margin-top: .8em;
        text-align: left;
    }
    .ContentAdderButtonContainer
    {
        float: left;
        width: 15em
    }
    .ContentAdderButtonContent
    {
        float: left;
        width: 72px
        height: 55px;  
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5em;   
        background-image: url('../Images/Backgrounds/ContentAdderButtonBackground.png');   
        background-repeat: repeat-x;
        border-top-left-radius: .2em .2em;
        border-top-right-radius: .2em .2em;
        border-bottom-left-radius: .2em .2em;
        border-bottom-right-radius: .2em .2em;
        border-color: #D2D2D2;
        border-style: solid;
        border-width: 1px;
    }
    .ContentAdderButton
    {
        float: left;
        font-size: .8em;
        width: 70px;  
        height: 16px;   
        text-align: center;  
        margin-top: .1em;
        padding-bottom: 10px;     
    }
    .ContentAdderButtonVendorImage
    {
        float: left;
        width: 70px;
        height: 16px;  
        text-align: center;
    }
    .ContentAdderDescription
    {
        float: left;   
        margin-left: .5em;
        width: 9em;
        text-align: left;
        font-size: .9em;
    }
    .OptionsContainer
    {
       float: left;
    }
    .OptionsListContainer
    {
        float: left;
        margin-right: 2em;
    }
    .AutoRefreshOptionsContainer
    {
        float: left;
    }
    .RefreshOptionList
    {
        text-align: left;
        width: 10em;   
        color: White;
    }
    .OptionInstructions
    {
        margin-top: 1em;
        width: 25em;
        color: #cccccc;
    }
    .RefreshOption .rbText
    {
        color: White;
    }
    .RadSplitter
       margin-left: auto;
       margin-right: auto;  
       width: 1188px;
       vertical-align: top;
       background-color: Purple;
    }
    /*--------------------------------------------------------------------------------------------*/
    /* RadDock Control                                                                            */
    /*  font: normal normal 12px "Segoe UI", Arial, Sans-serif;                                   */
    /*--------------------------------------------------------------------------------------------*/
    .RadDock
    {
        color: #FFFFFF;
        border: 0px solid #5E78A9;
        border-top: none;
        border-bottom: none;
        margin-bottom: 1em;
      /*  background-color: #A7CAA3 !important;*/
         
    }
    .RadDock .rdTitleBar em
    {
        padding-left: .5em !important;
        font: 14px/16px "Segoe UI", Arial, Sans-serif !important;      
    }
     
    .rdContent
    {
        color: #FFFFFF !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
      /*  background-color: #A7CAA3 !important; */  
        margin-left: auto !important;
        margin-right: auto !important;
        
    }
    .rdTop
    {
        background: url('../Images/Backgrounds/BoxHeaderBackground35.png') repeat-x;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .rdBottom .rdCenter, .rdRight, .rdLeft
    {
        display: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .rspResizeBar,
    .rspSlideContainerResize
    {
        background: transparent  repeat-y 0 0 !important;
        border-right-color: transparent !important;
        border-left-color: transparent !important;
    }
    .RadDockZone1
    .RadDockZone2,
    .RadDockZone3
    {   
        vertical-align: top;
        float: left;    /* ACN  We might want RadDockZone3 to float right */
    }
    .RadDockZone1
    {
        background-color: Green;
    }
    .RadDockZone2
    {
        background-color: Teal;
    }
    .RadDockZone3
    {
        background-color: Green;   
    }
    .JailPane1,
    .JailPane2,
    .JailPane3
    {
        float: left;
        vertical-align: top;
    }
    .SplitterBar
    {
        float: left;
    }


    Any help would engender great appreciation.
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 10 Oct 2011 Link to this post

    Hi Andy,

    I have tried to reproduce your issue, but to no avail. I have used the following code (I have removed some code in order to run it):

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
        .TabStripContainer
    {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em; 
        background-color: #E6EFF7;
    }
      
      
    .MyJailTabStrip
    {
        float: left;
     /*   background-color: #E6EFF7;*/
         
    }
    .DashBoardTab
    {
        float: left;
         
    }
      
    .rtsSelected,
    .rtsSelected span
    {
        background: url('../Images/Backgrounds/BodyBackgroundGradient.png') repeat-x !important;
      /*  background:url(../Images/btnUpdate.jpg) no-repeat 0 100%  !important; */
        background-color: #628DB5 !important;
        text-align: center;
        color: #FFFFFF !important;
    }
      
      
    .NewTab,
    .NewTabContainer
    {
        float: left;
        margin-left: 1em; 
    }
      
    .NewTab
    {
      /*  padding-top: .5em;
        font-size: .8em;*/
    }
    .NewTabLink
    {
        float: left;
    }
    #PortalContainer
    {
        margin-top: 0;
        width: 1200px;
        background-color: Red;
    }
    #PortalContent
    {
        width: 1188px;
        padding: 5px;
        background-color: White;  
        margin-left: auto;
        margin-right: auto;
    }
    .MyJailCommandContainer
    {
        padding-bottom: .4em;
        width: 20em;
    }
    .PortalContentWindowContainer
    {
        background-image: url('../Images/Backgrounds/PortalWindowGradient.png');
        background-repeat: repeat-x;
        color: White ;
        overflow: hidden;
        border-bottom-color: Black;
        border-bottom-style: solid;
        border-bottom-width: .2em;
          
    }
    .PortalOptionsWindowContent,
    .PortalContentWindowContent
    {
           padding-bottom: .4em;  
    }
    .PortalButton
    {
        border-style: solid;
        border-width: 1px;
        border-color: #819AD3;
        background-image: url('../Images/Backgrounds/Web20BlueButton.png');
        background-repeat: repeat-x;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-top: .3em;
        padding-bottom: .3em;
        border-top-left-radius: .3em .3em;
        border-top-right-radius: .3em .3em;
        border-bottom-left-radius: .3em .3em;
        border-bottom-right-radius: .3em .3em;
        margin-top: 1em;
    }
    .PortalImDoneButton
    {
        border-style: solid;
        border-width: 1px;
        border-color: #FFC027;
        background-image: url('../Images/Backgrounds/PortalButtonGradient.png');
        background-repeat: repeat-x;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-top: .3em;
        padding-bottom: .3em;
        border-top-left-radius: .3em .3em;
        border-top-right-radius: .3em .3em;
        border-bottom-left-radius: .3em .3em;
        border-bottom-right-radius: .3em .3em;
    }
      
    .rwWindowContent
    {
        background-image: url('../Images/Backgrounds/BodyBackgroundGradient.png');
        background-repeat: repeat-x;
        color: White !important;
        background-color: #628DB5 !important;
      
    }
      
      
    .PortalWindowContent
    {
        width: 47em;
        margin-left: 25em;
        text-align: left;
    }
    /*-------------------------------------------------------------------------------*/
    /* Content Adder                                                                 */
    /*-------------------------------------------------------------------------------*/
    .ContentAdderContainer
    {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
      
    .ContentAdderContent
    {
        padding-left: .5em;
        margin-left: 1.5em;
    }
    .ContentAdderListView
    {
        width: 47em;
        max-width: 47em;
    }
    #ContentAdderDataPagerPanel
    {
        width: 47em;
    }
    .ContentAdderDataPager
        width: 17em;
        margin-top: .8em;
        float: right;
    }
    .ImDoneButtonContainer
    {
        float: left;
        vertical-align: top;
        margin-right: 2em;
        margin-top: .8em;
        text-align: left;
    }
    .ContentAdderButtonContainer
    {
        float: left;
        width: 15em;
    }
    .ContentAdderButtonContent
    {
        float: left;
        width: 72px;
        height: 55px; 
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5em;  
        background-image: url('../Images/Backgrounds/ContentAdderButtonBackground.png');  
        background-repeat: repeat-x;
        border-top-left-radius: .2em .2em;
        border-top-right-radius: .2em .2em;
        border-bottom-left-radius: .2em .2em;
        border-bottom-right-radius: .2em .2em;
        border-color: #D2D2D2;
        border-style: solid;
        border-width: 1px;
    }
    .ContentAdderButton
    {
        float: left;
        font-size: .8em;
        width: 70px; 
        height: 16px;  
        text-align: center; 
        margin-top: .1em;
        padding-bottom: 10px;    
    }
    .ContentAdderButtonVendorImage
    {
        float: left;
        width: 70px;
        height: 16px; 
        text-align: center;
    }
    .ContentAdderDescription
    {
        float: left;  
        margin-left: .5em;
        width: 9em;
        text-align: left;
        font-size: .9em;
    }
    .OptionsContainer
    {
       float: left;
    }
    .OptionsListContainer
    {
        float: left;
        margin-right: 2em;
    }
    .AutoRefreshOptionsContainer
    {
        float: left;
    }
    .RefreshOptionList
    {
        text-align: left;
        width: 10em;  
        color: White;
    }
    .OptionInstructions
    {
        margin-top: 1em;
        width: 25em;
        color: #cccccc;
    }
    .RefreshOption .rbText
    {
        color: White;
    }
    .RadSplitter
    {
       margin-left: auto;
       margin-right: auto; 
       width: 1188px;
       vertical-align: top;
       background-color: Purple;
    }
    /*--------------------------------------------------------------------------------------------*/
    /* RadDock Control                                                                            */
    /*  font: normal normal 12px "Segoe UI", Arial, Sans-serif;                                   */
    /*--------------------------------------------------------------------------------------------*/
    .RadDock
    {
        color: #FFFFFF;
        border: 0px solid #5E78A9;
        border-top: none;
        border-bottom: none;
        margin-bottom: 1em;
      /*  background-color: #A7CAA3 !important;*/
          
    }
    .RadDock .rdTitleBar em
    {
        padding-left: .5em !important;
        font: 14px/16px "Segoe UI", Arial, Sans-serif !important;     
    }
      
    .rdContent
    {
        color: #FFFFFF !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
      /*  background-color: #A7CAA3 !important; */ 
        margin-left: auto !important;
        margin-right: auto !important;
         
    }
    .rdTop
    {
        background: url('../Images/Backgrounds/BoxHeaderBackground35.png') repeat-x;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .rdBottom .rdCenter, .rdRight, .rdLeft
    {
        display: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .rspResizeBar,
    .rspSlideContainerResize
    {
        background: transparent  repeat-y 0 0 !important;
        border-right-color: transparent !important;
        border-left-color: transparent !important;
    }
    .RadDockZone1
    .RadDockZone2,
    .RadDockZone3
    {  
        vertical-align: top;
        float: left;    /* ACN  We might want RadDockZone3 to float right */
    }
    .RadDockZone1
    {
        background-color: Green;
    }
    .RadDockZone2
    {
        background-color: Teal;
    }
    .RadDockZone3
    {
        background-color: Green;  
    }
    .JailPane1,
    .JailPane2,
    .JailPane3
    {
        float: left;
        vertical-align: top;
    }
    .SplitterBar
    {
        float: left;
    }
     
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="PortalContainer">
                        <div class="TabStripContainer">
                            <telerik:RadTabStrip ID="MyJailTabStrip" runat="server" MultiPageID="RadMultiPage1"
                                CausesValidation="false" CssClass="MyJailTabStrip">
                                <Tabs>
                                    <telerik:RadTab Text="Jail" Selected="true">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Warrants">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Civil Papers">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="Dispatch">
                                    </telerik:RadTab>
                                </Tabs>
                            </telerik:RadTabStrip>
                            <div class="clearer">
                            </div>
                        </div>
                        <div id="PortalContent" class="RoundedCorners">
                            <div>
                                <asp:Timer ID="Timer1" runat="server">
                                </asp:Timer>
                            </div>
                            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="1188"
                                Style="background-color: Black;">
                                <telerik:RadPageView ID="JailPageView" runat="server" Selected="true" Width="1188"
                                    Style="background-color: Aqua;">
                                    <telerik:RadDockLayout ID="JailDockLayout" runat="server" >
                                        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="1188" BorderSize="0"
                                            CssClass="RadSplitter">
                                            <telerik:RadPane ID="JailPane1" runat="server" Width="350">
                                                <telerik:RadDockZone ID="JailDockZone1" runat="server" CssClass="RadDockZone1 RoundedCorners"
                                                    BorderWidth="0" MinHeight="90%" MinWidth="150" Width="300">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" BorderWidth="0" Width="10"
                                                CssClass="SplitterBar">
                                            </telerik:RadSplitBar>
                                            <telerik:RadPane ID="JailPane2" runat="server" Width="350">
                                                <telerik:RadDockZone ID="JailDockZone2" runat="server" CssClass="RadDockZone2 RoundedCorners"
                                                    BorderWidth="0" MinHeight="90%" MinWidth="250" Width="300">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                            <telerik:RadSplitBar ID="RadSplitBar2" runat="server" BorderWidth="0" Width="10"
                                                CssClass="SplitterBar">
                                            </telerik:RadSplitBar>
                                            <telerik:RadPane ID="JailPane3" runat="server" Width="350">
                                                <telerik:RadDockZone ID="JailDockZone3" runat="server" CssClass="RadDockZone3 RoundedCorners"
                                                    BorderWidth="0" MinHeight="90%" MinWidth="150" Width="300">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                        </telerik:RadSplitter>
                                        <div class="clearer">
                                        </div>
                                    </telerik:RadDockLayout>
                                </telerik:RadPageView>
                                <telerik:RadPageView ID="WarrantsPageView" runat="server">
                                    <telerik:RadDockLayout ID="WarrantsDockLayout" runat="server" >
                                        <telerik:RadSplitter ID="RadSplitter2" runat="server" Width="1100" BorderSize="0">
                                            <telerik:RadPane ID="WarrantsPane1" runat="server">
                                                <telerik:RadDockZone ID="WarrantsDockZone1" runat="server" CssClass="RadDockZone1  RoundedCorners"
                                                    BorderWidth="0" MinHeight="92%" MinWidth="150" Width="350">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                            <telerik:RadSplitBar ID="RadSplitBar3" runat="server" BorderWidth="0">
                                            </telerik:RadSplitBar>
                                            <telerik:RadPane ID="WarrantsPane2" runat="server">
                                                <telerik:RadDockZone ID="WarrantsDockZone2" runat="server" CssClass="RadDockZone2  RoundedCorners"
                                                    BorderWidth="0" MinHeight="92%" MinWidth="250" Width="350">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                            <telerik:RadSplitBar ID="RadSplitBar4" runat="server" BorderWidth="0">
                                            </telerik:RadSplitBar>
                                            <telerik:RadPane ID="WarrantsPane3" runat="server">
                                                <telerik:RadDockZone ID="WarrantsDockZone3" runat="server" CssClass="RadDockZone3 RoundedCorners"
                                                    BorderWidth="0" MinHeight="92%" MinWidth="150" Width="350">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                        </telerik:RadSplitter>
                                    </telerik:RadDockLayout>
                                </telerik:RadPageView>
                                <telerik:RadPageView ID="CivilPapersPageView" runat="server">
                                    <telerik:RadDockLayout ID="CivilPapersDockLayout" runat="server" >
                                        <telerik:RadSplitter ID="RadSplitter3" runat="server" Width="1100" BorderSize="0">
                                            <telerik:RadPane ID="CivilPapersPane1" runat="server">
                                                <telerik:RadDockZone ID="CivilPapersDockZone1" runat="server" CssClass="RadDockZone1 RoundedCorners"
                                                    BorderWidth="0" MinHeight="92%" MinWidth="150" Width="350">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                            <telerik:RadSplitBar ID="RadSplitBar5" runat="server" BorderWidth="0">
                                            </telerik:RadSplitBar>
                                            <telerik:RadPane ID="CivilPapersPane2" runat="server">
                                                <telerik:RadDockZone ID="CivilPapersDockZone2" runat="server" CssClass="RadDockZone2 RoundedCorners"
                                                    BorderWidth="0" MinHeight="92%" MinWidth="250" Width="350">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                            <telerik:RadSplitBar ID="RadSplitBar6" runat="server" BorderWidth="0">
                                            </telerik:RadSplitBar>
                                            <telerik:RadPane ID="CivilPapersPane3" runat="server">
                                                <telerik:RadDockZone ID="CivilPapersDockZone3" runat="server" CssClass="RadDockZone3 RoundedCorners"
                                                    BorderWidth="0" MinHeight="92%" MinWidth="150" Width="350">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                        </telerik:RadSplitter>
                                    </telerik:RadDockLayout>
                                </telerik:RadPageView>
                                <telerik:RadPageView ID="DispatchPageView" runat="server">
                                    <telerik:RadDockLayout ID="DispatchDockLayout" runat="server" >
                                        <telerik:RadSplitter ID="RadSplitter4" runat="server" Width="1100" BorderSize="0">
                                            <telerik:RadPane ID="DispatchPane1" runat="server">
                                                <telerik:RadDockZone ID="DispatchDockZone1" runat="server" CssClass="RadDockZone1 RoundedCorners"
                                                    BorderWidth="0" MinHeight="92%" MinWidth="150" Width="350">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                            <telerik:RadSplitBar ID="RadSplitBar7" runat="server">
                                            </telerik:RadSplitBar>
                                            <telerik:RadPane ID="DispatchPane2" runat="server">
                                                <telerik:RadDockZone ID="DispatchDockZone2" runat="server" CssClass="RadDockZone2 RoundedCorners"
                                                    BorderWidth="0" MinHeight="92%" MinWidth="250" Width="350">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                            <telerik:RadSplitBar ID="RadSplitBar8" runat="server">
                                            </telerik:RadSplitBar>
                                            <telerik:RadPane ID="DispatchPane3" runat="server">
                                                <telerik:RadDockZone ID="DispatchDockZone3" runat="server" CssClass="RadDockZone3 RoundedCorners"
                                                    BorderWidth="0" MinHeight="92%" MinWidth="150" Width="350">
                                                </telerik:RadDockZone>
                                            </telerik:RadPane>
                                        </telerik:RadSplitter>
                                    </telerik:RadDockLayout>
                                </telerik:RadPageView>
                            </telerik:RadMultiPage>
                        </div>
                    </div>
                    <div class="clearer">
                    </div>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
            </asp:UpdatePanel>
        </form>
    </body>
    </html>

    Attached is float.gif showing the result in a browser. I am afraid I could not understand the required layout/functionality with the provided code/information. Could you open a support ticket and send us a fully working project of your application and some screenshots of what you have and what you would like to have on the page.

    Regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy
    Andy avatar
    18 posts
    Member since:
    Apr 2011

    Posted 17 Oct 2011 Link to this post

    THe problem was mine. I was using floats when they were not necessary.  I now only have float: left on the RadDockZones.
    Thanks for the help.
Back to Top