[Solved] radSplitter and radTabStrip together produce no vertical scrollbar

[Rob Heckart]

I have a radSplitter setup that has an orientation set to Vertical. It takes up 100% of the width and height of the page. Inside is a pane set to the following:

<telerik:RadPane ID="paneAlphaTabs" runat="server" Width="90px" Scrolling="Y">
            <telerik:RadTabStrip ID="tabAlpha" runat="server" DataTextField="letter" DataValueField="letter"
                Orientation="VerticalLeft" CausesValidation="False" ClickSelectedTab="True"
                Height="100%" Width="40px" AutoPostBack="True" Skin="Vista">
            </telerik:RadTabStrip>&nbsp;
</telerik:RadPane>

The TabStrip simply shows the letters A to Z. When the browser window height is smaller than the TabStrip, I am not seeing a vertical scrollbar in the paneAlphaTabs. I do see the scrollbar in other panes with the same setting.

Anyone have any idea how to get the scrollbars to show in this case?

Thanks!

[Tsvetie]

Hi Rob Heckart,
I created a simple test page, based on the provided information, but unfortunately, I was not able to reproduce the problem with the missing scrollbar - please find my test page attached. Could you please prepare and send me a simple running project, demonstrating the problem so that I can research what is causing it?

Greetings,
Tsvetie
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Rob Heckart]

I tried to run your example in IE7. I can see the tabstrip with the A's in it and the vertical scrollbar. When I change the size of the browser, the scrollbar doesn't change at all and doesn't allow me to scroll properly up and down to see all of the tabs. Doesn't work in FireFox either.

I posted a video showing the problems that I'm having. When the browser is made smaller, I would expect the scrollbar scroller to get smaller and be able to view the entire tabStrip even though the browser window is smaller.

Thanks,
Rob

[Alex Gyoshev]

Hello Rob,

It seems that the issue that you reported is reproduced with the 2008.Q3 release - it is fixed with the Q1. Of course, upgrading would be too much work for such a small issue - so here is the CSS work-around for it:
    div.RadTabStripVertical .rtsLI {
        display: block;
        float: none;
    }
   
    div.RadTabStripVertical .rtsLevel {
        overflow: visible;
        height: auto;
    }

Furthermore, you could remove the Height="100%" property for the TabStrip, since the splitter will automatically start scrolling.

I've attached a sample project that demonstrates all this with the Q3 release.

All the best,
Alex
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Tangium]

In case anyone else is searching about scrollbars not working, the problem I was having (with rad splitter panes) was because I had padding/margins set in the CSS for the panes. If this is in the documentation or other support articles, I haven't found it.

Keeping CSS margins & padding: 0 and instead putting a simple <div> within the pane with the needed padding/margin CSS fixed the problem -- the scrollbars magically appeared.

Using ASP.NET AJAX Q2 2010 / IE8.

Best regards,