Simple: Trying to handle scroll DIV or Panel

4 posts, 1 answers
  1. DoomerDGR8
    DoomerDGR8 avatar
    133 posts
    Member since:
    Aug 2010

    Posted 23 Nov 2010 Link to this post

    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.
  2. DoomerDGR8
    DoomerDGR8 avatar
    133 posts
    Member since:
    Aug 2010

    Posted 25 Nov 2010 Link to this post

    Any help please.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Veli
    Admin
    Veli avatar
    2002 posts

    Posted 25 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. DoomerDGR8
    DoomerDGR8 avatar
    133 posts
    Member since:
    Aug 2010

    Posted 25 Nov 2010 Link to this post

    Exquisite. Thanks.
Back to Top