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

10 posts, 0 answers
  1. James
    James avatar
    55 posts
    Member since:
    Oct 2011

    Posted 23 May 2013 Link to this post

    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!
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 24 May 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. James
    James avatar
    55 posts
    Member since:
    Oct 2011

    Posted 29 May 2013 Link to this post

    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
  5. James
    James avatar
    55 posts
    Member since:
    Oct 2011

    Posted 30 May 2013 Link to this post

    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
     
  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 03 Jun 2013 Link to this post

    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.
  7. James
    James avatar
    55 posts
    Member since:
    Oct 2011

    Posted 03 Jun 2013 Link to this post

    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
  8. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 07 Jun 2013 Link to this post

    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.
  9. Mick
    Mick avatar
    16 posts
    Member since:
    May 2012

    Posted 17 Dec 2013 Link to this post

    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.
  10. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 12 Mar 2014 Link to this post

    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.

     
  11. Carlo
    Carlo avatar
    10 posts
    Member since:
    Dec 2011

    Posted 10 Aug Link to this post

        Encountered with version 2015.2.729.40, CSS fix noted in this thread solved the problem.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017