RadPane Scrollbar Display Issues

[Geoff]

Hello,

I have a RadSplitter with two RadPanes, the left pane contains a RadTabStrip and RadMultiPage objects, with RadGrids inside the RadPageViews. The splitter is set to scroll vertically, but when a grid nested view is expanded (causing the content of the pane to be larger than its height), the pane is resized to allow scrolling but the scrollbar does not appear. White space appears in its place instead. However, when I mouse over another part of the page, the scrollbar magically appears. I also noted that when I collapsed the nested view, the existing scrollbar still remains as disabled until I mouse over another part of the page. Then it disappears.

I've attached some screenshots to help illustrate my issue.

1. Initial.jpg - How the page looks before expanding the second item
2. AfterExpand.jpg - After expanding the second item. Note how the content is now too large and gets cut off at the bottom of the left pane. Also note the width of the content of the pane has been narrowed slightly and now shows a white space where the vertical scrollbar should be.
3. AfterMouseOver.jpg - After moving the cursor away from the splitter, note the scrollbar now displays as expected. No postback has occurred. (Alternatively, the scrollbar also shows after using keystroke Ctrl + A to select all of the content on the page.)
4. AfterCollapse.jpg - After collapsing the second item. Note how the scrollbar remains but disabled (since there is nothing to scroll). Also note how the content of the left pane is hidden behind the scrollbar. The expected result here would be that the scrollbar should disappear since there is no more scrolling.
5. AfterMouseOver2.jpg - After moving the cursor away from the splitter, note the scrollbar has now disappeared, as expected. Again, no postback has occurred.

Here is an example of the markup I've used. I removed the markup from the other tabs and from the right RadPane for brevity:

<div style="width:100%; height:94%">
    <telerik:RadSplitter ID="rsAppraisalDetail" runat="server" Width="100%" Height="100%" Orientation="Vertical" VisibleDuringInit="False"
        OnClientLoaded="rsAppraisalDetail_Loaded">
        <telerik:RadPane ID="rpAppraisalDetailLeft" runat="server" scrolling="Y" Height="100%">
            <telerik:RadTabStrip ID="tsAppraisalDetail" runat="server" MultiPageID="mpAppraisalDetail" SelectedIndex="0">
                <Tabs>
                    <telerik:RadTab Text="<%$ Resources: GeneralInformation %>" PageViewID="pvGeneral" />
                    <telerik:RadTab Text="<%$ Resources: LandAndFeatures %>" PageViewID="pvLandFeatures" />
                    <telerik:RadTab Text="<%$ Resources: Buildings %>" PageViewID="pvBuildings" />
                    <telerik:RadTab Text="<%$ Resources: SalesHistory %>" PageViewID="pvSales" />
                    <telerik:RadTab Text="<%$ Resources: ExemptionsAndAssessment %>" PageViewID="pvExemptions" />
                    <telerik:RadTab Text="<%$ Resources: Notes %>" PageViewID="pvNotes" />
                </Tabs>
            </telerik:RadTabStrip>

            <telerik:RadMultiPage ID="mpAppraisalDetail" runat="server" Width="100%" SelectedIndex="0" >
                <telerik:RadPageView ID="pvGeneral" runat="server" CssClass="pageView">

                </telerik:RadPageView>
                <telerik:RadPageView ID="pvLandFeatures" runat="server" CssClass="pageView">

                </telerik:RadPageView>
                <telerik:RadPageView ID="pvBuildings" runat="server" CssClass="pageView">
                    <div>
                        <asp:Label runat="server" Text="<%$ Resources:RpaControlCaptions, lblBuildings %>" /><br />
                        <telerik:RadGrid ID="dtgBuildings" runat="server" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true" ShowFooter="true"
                            AutoGenerateColumns="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowCustomPaging="true" PageSize="5"
                            Width="100%" OnNeedDataSource="dtgBuildings_NeedDataSource" OnPreRender="dtgBuildings_PreRender"
                            OnSelectedIndexChanged="dtgBuildings_SelectedIndexChanged">
                            <ClientSettings EnablePostBackOnRowClick="true">
                                <Selecting AllowRowSelect="true" />
                            </ClientSettings>
                            <MasterTableView runat="server" DataKeyNames="Id" HierarchyLoadMode="Client" IsFilterItemExpanded="false">
                            <NestedViewTemplate>
                                    <telerik:RadGrid ID="dtgBuildingSections" runat="server" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true"
                                        AutoGenerateColumns="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowCustomPaging="true"
                                        PageSize="5" Width="100%"
                                        OnNeedDataSource="dtgBuildingSections_NeedDataSource">
                                        <MasterTableView runat="server" DataKeyNames="Id" IsFilterItemExpanded="false">
                                            <Columns>
                                                <telerik:GridBoundColumn UniqueName="YearBuilt" DataField="YearBuilt" HeaderText="<%$ Resources:RpaControlCaptions, lblYear %>"
                                                    DataType="System.Int16" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                                <telerik:GridBoundColumn UniqueName="ImprovementModelDescr" DataField="ImprovementModelDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblStyle %>" />
                                                <telerik:GridBoundColumn UniqueName="FramingClassDescr" DataField="FramingClassDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblClass %>" />
                                                <telerik:GridBoundColumn UniqueName="ActualArea" DataField="ActualArea"  HeaderText="<%$ Resources:RpaControlCaptions, lblActualArea %>"
                                                    DataType="System.Decimal" DataFormatString="{0:N0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                                <telerik:GridBoundColumn UniqueName="PercentComplete" DataField="PercentComplete"  HeaderText="<%$ Resources:RpaControlCaptions, lblPercentComplete %>"
                                                    DataType="System.Decimal" DataFormatString="{0:P0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                            </Columns>
                                        </MasterTableView>
                                    </telerik:RadGrid>
                                </NestedViewTemplate>
                                <Columns>
                                    <telerik:GridBoundColumn UniqueName="BuildingName" DataField="BuildingName" HeaderText="<%$ Resources:RpaControlCaptions, lblBuildingName %>" />
                                    <telerik:GridBoundColumn UniqueName="ImprovementTypeDescr" DataField="ImprovementTypeDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblBuildingType %>" />
                                    <telerik:GridBoundColumn UniqueName="EffectiveYear" DataField="EffectiveYear" HeaderText="<%$ Resources:RpaControlCaptions, lblEffectiveYear %>"
                                        DataType="System.Int16" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" />
                                    <telerik:GridBoundColumn UniqueName="ActualArea" DataField="ActualArea" HeaderText="<%$ Resources:RpaControlCaptions, lblActualArea %>"
                                        DataType="System.Decimal" DataFormatString="{0:N0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" />
                                    <telerik:GridBoundColumn UniqueName="FeatureCount" DataField="AttachedFeatures.Count" HeaderText="<%$ Resources:RpaControlCaptions, lblFeatures %>"
                                        DataType="System.Int32" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" DataFormatString="{0:N0}" />
                                    <telerik:GridBoundColumn UniqueName="FinalValue" DataField="FinalValue" HeaderText="<%$ Resources:RpaControlCaptions, lblValue %>"
                                        DataType="System.Decimal" DataFormatString="{0:C0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                </Columns>
                            </MasterTableView>
                        </telerik:RadGrid>
                    </div>
                    <asp:Panel runat="server" ID="pnlBuildingChildGrids">
                        <div style="padding-top:10px; margin-right: .5%; float:left; width:49.5%;">
                            <asp:Label runat="server" Text="<%$ Resources:RpaControlCaptions, lblStructuralElements %>" /><br />
                            <telerik:RadGrid ID="dtgElements" runat="server" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true" ShowFooter="true"
                                AutoGenerateColumns="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowCustomPaging="true" PageSize="5"
                                Width="100%" OnNeedDataSource="dtgElements_NeedDataSource">
                                <MasterTableView runat="server" DataKeyNames="ElementCategoryDescr, ElementCodeDescr" IsFilterItemExpanded="false">
                                    <Columns>
                                        <telerik:GridBoundColumn UniqueName="ElementCategoryDescr" DataField="ElementCategoryDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblCategory %>" />
                                        <telerik:GridBoundColumn UniqueName="ElementCodeDescr" DataField="ElementCodeDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblDescription %>" />
                                        <telerik:GridBoundColumn UniqueName="Percent" DataField="Percent"  HeaderText="<%$ Resources:RpaControlCaptions, lblPercent %>"
                                            DataType="System.Decimal" DataFormatString="{0:P0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>
                        </div>
                        <div style="padding-top:10px; margin-left: .5%; float:right; width:49.5%;">
                            <asp:Label runat="server" Text="<%$ Resources:RpaControlCaptions, lblUnitCounts %>" /><br />
                            <telerik:RadGrid ID="dtgUnits" runat="server" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true" ShowFooter="true"
                                AutoGenerateColumns="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowCustomPaging="true" PageSize="5"
                                Width="100%" OnNeedDataSource="dtgUnits_NeedDataSource">
                                <MasterTableView runat="server" DataKeyNames="ElementCategoryDescr, ElementCodeDescr" IsFilterItemExpanded="false">
                                    <Columns>
                                        <telerik:GridBoundColumn UniqueName="ElementCategoryDescr" DataField="ElementCategoryDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblCategory %>" />
                                        <telerik:GridBoundColumn UniqueName="ElementCodeDescr" DataField="ElementCodeDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblDescription %>" />
                                        <telerik:GridBoundColumn UniqueName="UnitCount" DataField="UnitCount"  HeaderText="<%$ Resources:RpaControlCaptions, lblUnits %>"
                                            DataType="System.Int32" DataFormatString="{0:N0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>
                        </div>
                        <div style="clear:both; padding-top:10px">
                            <asp:Label runat="server" Text="<%$ Resources: AttachedFeatures %>" /><br />
                            <telerik:RadGrid ID="dtgBuildingFeatures" runat="server" AllowPaging="true" AllowSorting="true" AllowFilteringByColumn="true" ShowFooter="true"
                                AutoGenerateColumns="false" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" AllowCustomPaging="true" PageSize="5"
                                Width="100%" OnNeedDataSource="dtgBuildingFeatures_NeedDataSource">
                                <MasterTableView runat="server" DataKeyNames="Id" IsFilterItemExpanded="false">
                                    <Columns>
                                        <telerik:GridBoundColumn UniqueName="CodeShortDescr" DataField="CodeShortDescr" HeaderText="<%$ Resources: FeatureName %>" />
                                        <telerik:GridBoundColumn UniqueName="Description" DataField="Description" HeaderText="<%$ Resources: FeatureDescription %>" />
                                        <telerik:GridBoundColumn UniqueName="QualityDescr" DataField="QualityDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblQuality %>" />
                                        <telerik:GridBoundColumn UniqueName="ConditionDescr" DataField="ConditionDescr" HeaderText="<%$ Resources:RpaControlCaptions, lblCond %>" />
                                        <telerik:GridBoundColumn UniqueName="EffYearBuilt" DataField="EffYearBuilt" HeaderText="<%$ Resources:RpaControlCaptions, lblYear %>"
                                            DataType="System.Int16" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                        <telerik:GridBoundColumn UniqueName="FinalValue" DataField="FinalValue" HeaderText="<%$ Resources:RpaControlCaptions, lblValue %>"
                                            DataType="System.Decimal" DataFormatString="{0:C0}" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" />
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>
                        </div>
                    </asp:Panel>
                </telerik:RadPageView>
                <telerik:RadPageView ID="pvSales" runat="server" CssClass="pageView">

                </telerik:RadPageView>
                <telerik:RadPageView ID="pvExemptions" runat="server" CssClass="pageView">

                </telerik:RadPageView>
                <telerik:RadPageView ID="pvNotes" runat="server" CssClass="pageView">

                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </telerik:RadPane>
        <telerik:RadPane ID="rpAppraisalDetailRight" runat="server" Height="100%" Width="22px" MinWidth="200" BackColor="#C2D0E0" Locked="True">

        </telerik:RadPane>
    </telerik:RadSplitter>
</div>

Am I missing something in my markup? Or could it possibly be a bug in the control or maybe even IE? I am running IE 9.0.8112.16421

Thanks!
Geoff

[Dobromir]

Hi Geoff,

We are not aware of such problem and you are the first one to report it. I tried to reproduce the issue but to no avail. Since the provided markup is not runnable due to missing dependencies, I have tested a stripped down version of the markup trying to replicate the layout.

Could you please modify the attached sample page to the point where the problem occurs and send it back? Or could you please open a formal support ticket and provide fully runnable sample project and / or a live URL reproducing the issue so we can examine and debug it locally?

Kind regards,
Dobromir
the Telerik team