Problem with Scrolling in RadTabStrip

4 posts, 0 answers
  1. Christian
    Christian avatar
    16 posts
    Member since:
    Nov 2008

    Posted 05 Feb 2015 Link to this post

    Hello, 
    I am trying to display a tabStrip with many tabs. Following this link : http://demos.telerik.com/aspnet-ajax/tabstrip/examples/functionality/scrolling-and-multi-row-tabs/defaultcs.aspx?show-source=true is not helpfull for me because my tabs are not placed on a single line (See pict 1), they are placed on many lines (See pict2) and when i scroll, the radTab shows blank space(See pict 3).
    This is my piece of code i am using :

    <telerik:RadSplitter ID="sPC" runat="server" Orientation="Horizontal" CssClass="hiddenOverflow">
        <telerik:RadPane ID="pPC" runat="server" >
              <telerik:RadTabStrip ID="tsPC"  Width="800px" runat="server" ScrollButtonsPosition="Middle" Height="26px"  AutoPostBack="False" ScrollChildren="true" >
                <Tabs>
                    <telerik:RadTab Text="Tab11"></telerik:RadTab>
                    <telerik:RadTab Text="Tab12"></telerik:RadTab>
                    <telerik:RadTab Text="Tab13"></telerik:RadTab>
                    <telerik:RadTab Text="Tab14"></telerik:RadTab>
                    <telerik:RadTab Text="Tab15"></telerik:RadTab>
                    <telerik:RadTab Text="Tab16"></telerik:RadTab>
                    <telerik:RadTab Text="Tab17"></telerik:RadTab>
                    <telerik:RadTab Text="Tab18"></telerik:RadTab>
                    <telerik:RadTab Text="Tab19"></telerik:RadTab>
                    <telerik:RadTab Text="Tab111"></telerik:RadTab>
                    <telerik:RadTab Text="Tab112"></telerik:RadTab>
                    <telerik:RadTab Text="Tab113"></telerik:RadTab>
                    <telerik:RadTab Text="Tab114"></telerik:RadTab>
                    <telerik:RadTab Text="Tab115"></telerik:RadTab>
                    <telerik:RadTab Text="Tab116"></telerik:RadTab>
                    <telerik:RadTab Text="Tab18"></telerik:RadTab>
                    <telerik:RadTab Text="Tab19"></telerik:RadTab>
                    <telerik:RadTab Text="Tab111"></telerik:RadTab>
                    <telerik:RadTab Text="Tab112"></telerik:RadTab>
                    <telerik:RadTab Text="Tab113"></telerik:RadTab>
                    <telerik:RadTab Text="Tab114"></telerik:RadTab>
                    <telerik:RadTab Text="Tab115"></telerik:RadTab>
                    <telerik:RadTab Text="Tab116"></telerik:RadTab>
                    <telerik:RadTab Text="Tab18"></telerik:RadTab>
                    <telerik:RadTab Text="Tab19"></telerik:RadTab>
                    <telerik:RadTab Text="Tab111"></telerik:RadTab>
                    <telerik:RadTab Text="Tab112"></telerik:RadTab>
                    <telerik:RadTab Text="Tab113"></telerik:RadTab>
                    <telerik:RadTab Text="Tab114"></telerik:RadTab>
                    <telerik:RadTab Text="Tab115"></telerik:RadTab>
                    <telerik:RadTab Text="Tab116"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
    </telerik:RadPane>
    </telerik:RadSplitter>

    Any ides?
    Thank you !
  2. Christian
    Christian avatar
    16 posts
    Member since:
    Nov 2008

    Posted 10 Feb 2015 Link to this post

    Nobody cannot provide me an idea?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 10 Feb 2015 Link to this post

    Hello,

    I took the provided code and tried to replicate the described problem but to no avail. Find attached my test page  and see what is the difference in your case. 

    If the issue still persists specify which is the Browser you are using and which is the version of Telerik UI for ASP.NET AJAX in your project.

    Regards,
    Pavlina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Christian
    Christian avatar
    16 posts
    Member since:
    Nov 2008

    Posted 11 Feb 2015 Link to this post

    Hello, 
    I tried your test and it works good.
    Anyway, i found the problem in my case. The css class called "rtsScroll" on the <ul> tag is the problem. If i remove it, everything seems to be perfect.
    This is happening on all browsers, i am using Telerik Framework Version 2014.3.1209.40
     
Back to Top