Stop TabStrip from "Stacking/Providing Multiple Rows of Tabs"

[James]

Hi Everyone,

I have what may be a simple question.  The 1st screenshot below shows how I want my tabstrip to look, with its alignment fully justified to the page width.  However, whenever any item causes the vertical scroll bar to display on the browser, such as in the 2nd attachment, my TabStrip "stacks" (I assume because the scroll bar is consuming horizontal space.).  

Therefore, how do I "stop" my TabStrip from stacking/displaying in multiple tab rows?  Here is my declaration for the tab strip:

<telerik:RadTabStrip ID="FastportRTS" runat="server" SelectedIndex="0" Skin="BlackMetroTouch"
    Align="Justify" >
</telerik:RadTabStrip>

Thanks so much!

[Dimitar Terziev]

Hello James,

The experienced behavior is caused by a bug which have been fixed in the just released beta version of our controls. Please download the beta and check whether the issue persists.

Regards,
Dimitar Terziev
Telerik

[James]

Hi,

Thank you for your suggestion.  Unfortunately, no luck.  We did as instructed and moved to the beta version of the controls, but the issues persisted.  I've attached a screenshot.

Any other ideas.  A CSS trick maybe?

Jim

[James]

My friend Princy -- you may notice she posts on a lot of the forums -- came up with a great fix.  Just place this in the CSS section of the page:

.rtsUL {

Width: 105%;

}

If you ever need a great Telerik programmer, she is a star.

Jim
 

[Dimitar Terziev]

Hello Jim,

I'm glad that the problem is now resolved thanks to Princy, but in order to fix this issue could you please open a support ticket and provide a sample page so we could debug it locally.

Thank you for your cooperation.

Regards,
Dimitar Terziev
Telerik

[James]

Dimitar,

Unfortunately, my application is a little large to strip it down to provide a sample.  However, to reproduce this issue, it is simple.  Just do as follows:

• Add a RadTabStrip to a page and set it to fully justify.
• I would recommend that the RTS has a few tabs.
• Add any other control to the pages that will cause the the right scroll bar to appear in the browser.  For example, a RadComboBox or a RadAutocomplete box cases the right-vertical scroll bar to appear when results "drop down"
• When those results drop down, the RTS displays the undesired behavior.

I hope this helps.  And thanks again for your attention.

Jim

[Dimitar Terziev]

Hi Jim,

Thank you for the provided information,

Regards,
Dimitar Terziev
Telerik

[Mick]

I'm encountering the same problem with build 2013.2.717.40.

I've attached a screen shot of our application with the RadPageView for every tab displayed vertically.

It's easy to find posts in this forum reporting this same problem over many years.

The problem is intermittent i.e. about 5 out of 100 requests are displayed with the RadPageViews stacked vertically.

I don't believe there is any specific code required to reproduce the problem, I think it is to do with the client, for whatever reason, only partially rendering the page.  This could be due to the client closing the connection before the page has finished loading.  Which implies that the heavier your page is and the longer it takes to load the greater the chance a user will encounter this issue.  It also means its difficult to reproduce this problem if:-

* your test page is very light weight and quick to load
* you're testing in an environment with low latency between the client and the web server.

For Telerik to reproduce this I would suggest creating a heavy page and using something like Charles Proxy to simulate a flaky network.  You could also try removing javascript/css until you're able to reproduce the problem.  Once you're able to reproduce the problem I would think about the order in which things are loaded and trying to reorder things in such a way that render problems are minimized. 

I've seen using RenderSelectedPageOnly="true" as a solution, of course only one tab can be displayed whilst using this option however it means post backs to change tabs and significantly different code.

[Dimitar Terziev]

Hello Mick,

In general all PageViews are rendered with "display:none" style and only the currently selected one is made visible. In fact the whole style-sheet of the RadMultiPage contains only the display style. If all PageViews are shown then it is possible that the style-sheet of the RadMultiPage is not being loaded on the page. This is especially valid when the are two many controls on the page and the browser is IE, due to the infamous CSS and stylesheet limitation. In case a RadStyleSheetManager is not being used, than it's very likely that at some point the style-sheets on the page exceed 31 and the styles of the RadMultiPage are being dropped.

Regards,
Dimitar Terziev
Telerik

 

 

[Carlo]

    Encountered with version 2015.2.729.40, CSS fix noted in this thread solved the problem.