Horizontal scrolling issue

[Albert Shenker]

I have a panelbar with height/width set to 100%. The panelbar resides in a splitter pane. If the content of a particular panelitem template is to large, I expect both horizontal and vertical scrollbars to appear. I am able to get the vertical scrollbars, but am having issues getting horizontal scrollbars to appear in Firefox 3.5. They appear coorectly in IE6 (shocking!). I haven't tried in IE 7/8. I am using the latest internal build of the controls (Q3 2009 1306)

The following is an example of my markup. I included an oversized div in the second panel item to try and demonstrate the scrollbars, but only the vertical bars showed up, even though I reduced the width of the left splitter pane (which holds the panelbar) to far less than  300px.:

<telerik:RadPanelbar id="rpbOrg"
                    Runat="server"
                    Height="100%"
                    Width="100%"
                    ExpandMode="FullExpandedItem"
                    Skin="Office2007"
                    style="height: 100%; border:0px;">
    <Items>
        <telerik:RadPanelItem Text="My Info" Value="MyInfo" Expanded="False">
            <Items>
                <telerik:RadPanelItem >
                    <ItemTemplate>
some content
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="My Evaluations" Value="MyEvaluations" >
            <Items>
                <telerik:RadPanelItem >
                    <ItemTemplate>
                        <div style="width:300px; height:1000px; background-color:Red;"></div>
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="My Caseload" Value="MyCaseload" id="pbiCaseload">
            <Items>
                <telerik:RadPanelItem Value="Caseload" >
                    <ItemTemplate>
                        some other content                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
            </Items>
</telerik:RadPanelbar>

One interesting to note, if I use a treeview instead of the oversized div, the treeview's horizontal scrollbar shows up. However, if the treeview is longer than the vertical space available, I have to scroll down using the panel bar's scrollbar in order to see the horizontal scrollbar generated by the treeveiw. This occurs in all browsers I have tried. In my real app I need to get the panelbar working with the treeview, but for now I would settle for just having the scrollbars working properly with the oversized div.

[Yana]

Hi Albert Shenker,

Please add these css styles to your page in order to show the horizontal scrollbar:

<style type="text/css">
    .RadPanelBar .rpItem {
        overflow: visible !important;
    }

    .RadPanelBar .rpLevel1 {
        height: 100% !important;
        overflow: auto !important;
    }
</style>

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Albert Shenker]

Thanks, Yana! That takes care of the issue with the oversized div. As a note to anyone who finds this thread in their own scenario... if you have a treeview in your panel bar item and you want horizontal scrolling to be handled by the panelbar, you need to disable the scrolling of the treeview. Otherwise, if the horizontal space is too small, the treeview horizontal scrollbar will appear, not the panel bar's. This would be ok, except for the fact that, if the treeview list is longer than the vertical space allowed, then the panelbar's vertical scrollbar will be shown and you will have to scroll all the way to the bottom to see the treeview's horizontal scrollbar. This is not ideal.

So, in my app I found that, to disable the scrolling of the treeview, I added the following to the treeview declaration:

style="overflow:visible;"

I would have thought that setting the overflow to "auto" or "hidden" woudl have been more intuitive, but neither of those got the desired result of the panel bar's own horizontal scrollbar being displayed when the treeview content was too waide.