Simple: Trying to handle scroll DIV or Panel

[DoomerDGR8]

Dear All,

I'm trying to limit the height of a CheckedListBox by using a scrollable ASP Panel and placing the CheckedListBox in it. Now, I'm on a content form and my master page has the actual AjaxManager. There is a Proxy on my content form but the end behavior is pretty weird. The CheckedListBox gets a vertical scroll bar as required. But the Page also get a vertical scroll bar and it's length is equal to that of a page where the CheckedListBox wouldn't have been inside a scroll panel. See attachment.

Markup:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderMain" runat="server">
  <telerik:RadScriptBlock ID="RadScriptBlockAssignmentManager" runat="server">
    <script type="text/javascript">

    </script>
  </telerik:RadScriptBlock>
  <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxyAssignmentManager" runat="server">
    <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="RadComboBoxCoordinators">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="PanelAssignmentManager" />
        </UpdatedControls>
      </telerik:AjaxSetting>
      <telerik:AjaxSetting AjaxControlID="ButtonUpdate">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="PanelAssignmentManager" />
        </UpdatedControls>
      </telerik:AjaxSetting>
    </AjaxSettings>
  </telerik:RadAjaxManagerProxy>
  <telerik:RadFormDecorator ID="RadFormDecoratorAssignmentManager" runat="server" DecorationZoneID="divRoot"
    DecoratedControls="All" />
  <div id="divRoot" style="width: 890px;">
    <asp:Panel runat="server" ID="PanelAssignmentManager" Width="890px">
      <table id="tableRoot" width="400px" cellpadding="0" cellspacing="0">
        <tr>
          <td style="width: 400px; text-align: left;">
            <fieldset id="fieldsetCoordinators" style="width: 378px">
              <legend>Locum Coordinator:</legend>
              <telerik:RadComboBox ID="RadComboBoxCoordinators" runat="server" SkinID="RadComboBoxWidthless" DataSourceID="LinqDataSourceLocumCoordinators"
                DataTextField="FullName" DataValueField="OID" Skin="Office2007" Width="100%" AppendDataBoundItems="True"
                AutoPostBack="True" OnDataBound="RadComboBoxCoordinators_DataBound" OnSelectedIndexChanged="RadComboBoxCoordinators_SelectedIndexChanged" />
            </fieldset>
          </td>
        </tr>
        <tr>
          <td style="text-align: left; width: 400px;">
            <fieldset id="fieldsetListCounties" style="width: 378px">
              <legend>County List:</legend>
              <asp:Panel ID="PanelScroll" runat="server" ScrollBars="Vertical" Height="300px">
                <asp:CheckBoxList ID="CheckBoxListCounties" runat="server" DataSourceID="LinqDataSourceCounties" DataTextField="CName"
                  DataValueField="OID" Width="100%" />
              </asp:Panel>
            </fieldset>
          </td>
        </tr>
        <tr>
          <td style="text-align: center; width: 400px">
            <br style="clear: both;" />
            <asp:Button ID="ButtonUpdate" runat="server" Text="Update" OnClick="ButtonUpdate_Click" />
          </td>
        </tr>
      </table>
      <br style="clear: both;" />
      <div id="divNotification" style="width: 800px; padding: 2px; text-align: left; vertical-align: middle;">
        <asp:Label ID="LabelNotification" runat="server" />
      </div>
      <br style="clear: both;" />
    </asp:Panel>
  </div>
  <asp:LinqDataSource ID="LinqDataSourceLocumCoordinators" runat="server" ContextTypeName="ExciteEngine2.DAL.LINQ.ExciteEngine2DataContextDataContext"
    Select='new (OID, String.Concat(FirstName, " ", LastName) AS FullName)' TableName="Users" Where="UserTypeID == @UserTypeID && IsActive == @IsActive">
    <WhereParameters>
      <asp:Parameter DefaultValue="2" Name="UserTypeID" Type="Int32" />
      <asp:Parameter DefaultValue="true" Name="IsActive" Type="Boolean" />
    </WhereParameters>
  </asp:LinqDataSource>
  <asp:LinqDataSource ID="LinqDataSourceCounties" runat="server" ContextTypeName="ExciteEngine2.DAL.LINQ.ExciteEngine2DataContextDataContext"
    OrderBy="Name" Select='new (OID, String.Concat(Name, " (", OID.ToString(), ")") As CName )' TableName="Counties" />
</asp:Content>

Kindly guide me through as I'm unable to get a viable solution otherwise and this small thing is keeping me from showing off to the client.

[DoomerDGR8]

Any help please.

[Veli]

Hello Hassan,

Try setting position:relative to the PanelScroll div:

<asp:Panel ID="PanelScroll" runat="server" ScrollBars="Vertical" Height="300px"
    style="position:relative">
    <asp:CheckBoxList ID="CheckBoxListCounties" runat="server"
        DataSourceID="LinqDataSourceCounties" DataTextField="CName"
        DataValueField="OID" Width="100%" />
</asp:Panel>

This layout issue happens in IE and is caused by a bug in the rendering engine. It appears when you use RadFormDecorator. setting position:relative to the scrollable container should fix it.

Greetings,
Veli
the Telerik team

[DoomerDGR8]

Exquisite. Thanks.