Rad Dock overflow and scrollable container issues

[Adam Heeg]

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">
                  <p 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">
                  <p 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">
                  <p 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?

[Pero]

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.

[Adam Heeg]

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