dynamic tab strip scroll property not working

4 posts, 0 answers
  1. VIJAY
    VIJAY avatar
    31 posts
    Member since:
    May 2011

    Posted 14 Jun 2012 Link to this post

    We have dynamically created tabs using RadTabStrip.
    We have also set the following  RAdTabStrip Properties

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server"   SelectedIndex="0" OnTabClick="RadTabStrip1_TabClick" ScrollChildren="true" PerTabScrolling="true"  ScrollButtonsPosition="Middle" Orientation="HorizontalTop" Width="1340px">
      <Tabs ></Tabs>
    </telerik:RadTabStrip>

    Tabs are generated dynamically and the scroll also appears but the tab Tab at the Last Index is shown in the next line.
     I tried reducing the number of tabs by 1 but the problem still persists.

    I think the width of the tab and the text length in each tab is creating a problem. But due to my requirement i have to mention a fixed width to the tab strip.

    I have attached the image of the tabstrip.

    Thanks in Advance.


  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Jun 2012 Link to this post

    Hi VIJAY,

    I tested the code that you provided with the 2012.2.607.40 version of the Telerik controls but I am not able to get the behavior that you describe. I attached my sample for your reference. Can you please modify it in a way so that it demonstrates the issue that you get and send it back to me so I can inspect it locally and help you out?

    Greetings,
    Kate
    the Telerik team
    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. VIJAY
    VIJAY avatar
    31 posts
    Member since:
    May 2011

    Posted 20 Jun 2012 Link to this post

    Hi Kate, 
     Thanks for your Reply.
    I have modified your code a bit (just assigned different text to the tabs) to reproduce the issue we are facing.
    The following is the modified code. on Page_Load.  
    protected void Page_Load(object sender, EventArgs e)
        {
            RadTab tab1 = new RadTab();
            tab1.Text = "Rad ScriptManager 1";
            RadTab tab2 = new RadTab();
            tab2.Text = "Rad TabStrip 1";
            RadTab tab3 = new RadTab();
            tab3.Text = "Telerik Controls 1";
            tab3.NavigateUrl = "http://www.telerik.com";
            RadTab tab4 = new RadTab();
            tab4.Text = "Telerik RadGrid 1";
            RadTab tab5 = new RadTab();
             
            tab5.Text = "Telerik RadComboBox 11";
            RadTab tab6 = new RadTab();
            tab6.Text = "Telerik RadToolTip";
            RadTab tab7 = new RadTab();
            tab7.Text = "Telerik RadComboBox 12";
            RadTab tab8 = new RadTab();
            tab8.Text = "Telerik RadComboBox";
            RadTab tab9 = new RadTab();
            tab9.Text = "Telerik RadComboBox 3";
            RadTab tab10 = new RadTab();
            tab10.Text = "Telerik RadComboBox 4";
            RadTab tab11 = new RadTab();
            tab11.Text = "Telerik RadComboBox 5";
            RadTab tab12 = new RadTab();
            tab12.Text = "Telerik RadComboBox 19";
            RadTab tab14 = new RadTab();
            tab14.Text = "Telerik RadComboBox";
            RadTab tab15 = new RadTab();
            tab15.Text = "Telerik RadComboBox 6";
            RadTab tab16 = new RadTab();
            tab16.Text = "Telerik RadComboBox 91";
            RadTab tab17 = new RadTab();
            tab17.Text = "Telerik RadComboBox 34";
            RadTab tab18 = new RadTab();
            tab18.Text = "Telerik RadComboBox 45";
            RadTab tab19 = new RadTab();
            tab19.Text = "Telerik RadComboBox 4";
            RadTab tab20 = new RadTab();
            tab20.Text = "Telerik RadComboBox 2";
            RadTab tab21 = new RadTab();
            tab21.Text = "Rad TabStrip";
            RadTab tab22 = new RadTab();
            tab22.Text = "Rad TabStrip";
            RadTab tab23 = new RadTab();
            tab23.Text = "Rad TabStrip";
            RadTab tab24 = new RadTab();
            tab24.Text = "Rad TabStrip";
            RadTabStrip2.Tabs.Add(tab1);
            RadTabStrip2.Tabs.Add(tab2);
            RadTabStrip2.Tabs.Add(tab3);
            RadTabStrip2.Tabs.Add(tab4);
            RadTabStrip2.Tabs.Add(tab5);
            RadTabStrip2.Tabs.Add(tab6);
            RadTabStrip2.Tabs.Add(tab7);
            RadTabStrip2.Tabs.Add(tab8);
            RadTabStrip2.Tabs.Add(tab9);
            RadTabStrip2.Tabs.Add(tab10);
            RadTabStrip2.Tabs.Add(tab11);
            RadTabStrip2.Tabs.Add(tab12);
            RadTabStrip2.Tabs.Add(tab14);
            RadTabStrip2.Tabs.Add(tab15);
            RadTabStrip2.Tabs.Add(tab16);
            RadTabStrip2.Tabs.Add(tab17);
            RadTabStrip2.Tabs.Add(tab18);
            RadTabStrip2.Tabs.Add(tab19);
            RadTabStrip2.Tabs.Add(tab20);
            RadTabStrip2.Tabs.Add(tab21);
            RadTabStrip2.Tabs.Add(tab22);
            RadTabStrip2.Tabs.Add(tab23);
            RadTabStrip2.Tabs.Add(tab24);
        }



    Thanks 
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 25 Jun 2012 Link to this post

    Hello Vijay,

    It looks like the problem occurs only in IE9. The width of the rtsScroll element is not correctly computed in this browser mode and it is shorter by a few pixels than it should be. In the sample Kate sent you, the following css will fix the problem:

    <style type="text/css">
           .rtsScroll
           {
              width: 1552px !important;   
           }
       </style>

    However, in your actual project, you will have to inspect the rtsScroll element with the dev toolbar of IE and determine what width is needed. Here is a video capture that show how to do this -
    http://screencast.com/t/FiRCp51gIS
    .

    Please, let me know if you have any other questions or concerns.

    Kind regards,
    Peter
    the Telerik team
    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.
Back to Top