Rad Dock overflow and scrollable container issues

3 posts, 0 answers
  1. Adam Heeg
    Adam Heeg avatar
    19 posts
    Member since:
    Jul 2012

    Posted 08 Mar 2010 Link to this post

    I'm having overflow problems in my rad docks.  They are in a user control (in an update panel), in a content page which is in a master page.  My control is generating all the rad docks dynamically.  The rad docks are overflowing the containers they are in, but my other controls are obeying the rules. 

    Screen Shot 1
    Master Page

     

    <td> 
     <div id="MainDiv">  
      <asp:ContentPlaceHolder ID="MainPlaceHolder" runat="server">  
      </asp:ContentPlaceHolder> 
     </div> 
    </td> 
    ------ CSS setting  
    #MainDiv  
    {  
        height: 458px;  


    Screen Shot 2
    Master page has a control panel added to facilitate fitting in the allowed area.  You can see how the Rad Docks overflow above the control container.  They also overflow below the container too.  Other controls (labels, buttons, etc..) will not appear in the overfow area.  The same effect appears no matter if I put the panel control in the master page, content page, or in the user control.

     

     

                <td> 
                    <div id="MainDiv">  
                    <asp:Panel ID = "null3kd98" runat="server" Height="100%" ScrollBars="Vertical">  
                        <asp:ContentPlaceHolder ID="MainPlaceHolder" runat="server">  
                        </asp:ContentPlaceHolder> 
                        </asp:Panel> 
                    </div> 
                </td> 


    Here is my rad dock layout control in the user control

     

     

    <div id="div_PrioritizePriorities">  
       <asp:UpdatePanel runat="server" ID="up1">  
     
          <ContentTemplate> 
                <telerik:RadDockLayout ID="RadDockLayout1" runat="server" 
                   OnSaveDockLayout="RadDockLayout1_SaveDockLayout" 
                   OnLoadDockLayout="RadDockLayout1_LoadDockLayout">  
                     
                   <div id="div_rdZoneMain">  
                      <class="p_ZoneHeader">  
                         Current Widgets  
                      </p> 
                      <telerik:RadDockZone ID="rdZoneMain" runat="server" minHeight="180px"   
                         Width="100%" BorderStyle="None">  
                      </telerik:RadDockZone> 
                   </div> 
                     
                   <div id="div_rdZoneNew">  
                      <class="p_ZoneHeader">  
                         New Widgets  
                      </p> 
                      <telerik:RadDockZone ID="rdZoneNew" runat="server" minHeight="180px"   
                         Width="100%" BorderStyle="None">  
                      </telerik:RadDockZone> 
                        
                   </div> 
                     
                   <div id="div_rdZoneHidden2" class="div_rdZoneHidden2" runat="server">  
                      <class="p_ZoneHeader">  
                         Hidden Widgets  
                      </p> 
                      <telerik:RadDockZone ID="rdZoneHidden" runat="server" width="100%" MinHeight="30px" 
                         BorderStyle="None" /> 
                   </div> 
                </telerik:RadDockLayout> 
          </ContentTemplate> 
            
          <Triggers> 
             <asp:AsyncPostBackTrigger ControlID="ibToggleCollapseAll" EventName="Click" /> 
             <asp:AsyncPostBackTrigger ControlID="cbShowImpact" EventName="checkedchanged" /> 
             <asp:AsyncPostBackTrigger ControlID="cbShowIssues" EventName="checkedchanged" /> 
          </Triggers> 
               
       </asp:UpdatePanel> 
    </div> 
     



    What can I do to get my rad docks to obey their containers?

  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 11 Mar 2010 Link to this post

    Hi Adam,

    Are you by any chance experiencing this problem only under IE6 and IE7. The DockZone has position: relative, and the same is true for the docks when docked to a DockZone. If the DockZone's container does not have position: relative the content will be shown outside the container as explained in the following article: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/.

    PS. Use IE Dev Toolbar to inspect the DOM tree and the CSS applied to the elements.

    Greetings,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam Heeg
    Adam Heeg avatar
    19 posts
    Member since:
    Jul 2012

    Posted 11 Mar 2010 Link to this post

    Pero,

    I'm fortunate enough to only have to develop to a single browser, which does indeed happen to be IE 7.  Your suggestion worked, thank you.


    Adam
Back to Top