This is a migrated thread and some comments may be shown as answers.

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

9 Answers 222 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 23 May 2013, 01:20 PM
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!

9 Answers, 1 is accepted

Sort by
0
Dimitar Terziev
Telerik team
answered on 24 May 2013, 09:05 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
James
Top achievements
Rank 1
answered on 30 May 2013, 12:38 AM
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
0
James
Top achievements
Rank 1
answered on 30 May 2013, 06:23 PM
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
 
0
Dimitar Terziev
Telerik team
answered on 03 Jun 2013, 02:25 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
James
Top achievements
Rank 1
answered on 03 Jun 2013, 02:34 PM
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
0
Dimitar Terziev
Telerik team
answered on 07 Jun 2013, 10:04 AM
Hi Jim,

Thank you for the provided information,

Regards,
Dimitar Terziev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Mick
Top achievements
Rank 1
answered on 18 Dec 2013, 12:57 AM
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.
0
Dimitar Terziev
Telerik team
answered on 12 Mar 2014, 08:29 AM
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
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
0
Carlo
Top achievements
Rank 1
answered on 10 Aug 2016, 06:27 PM
    Encountered with version 2015.2.729.40, CSS fix noted in this thread solved the problem.
Tags
TabStrip
Asked by
James
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
James
Top achievements
Rank 1
Mick
Top achievements
Rank 1
Carlo
Top achievements
Rank 1
Share this question
or