Tabs under RadTabStrip displays in two lines

4 posts, 0 answers
  1. Jongalala
    Jongalala avatar
    7 posts
    Member since:
    Jul 2013

    Posted 12 Jan Link to this post

    I've a simple page where I've some tabs in radtabstrip. I want to display this web page in a web browser control in a win form application. If I re size the windows form application then the last tab displays in second line. Please note that the scroll bar also displays. Please see the screenshot1.

    Here is the code I used in the aspx page.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadTab.aspx.cs" Inherits="PlayGround_WebApplication.RadTab" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html>
     
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
             
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadTabStrip ScrollButtonsPosition="Left" runat="server" ID="radTabStrip" PerTabScrolling="true" ScrollChildren="true"
                SelectedIndex="0" Width="100%" Style="padding-top: 2px;">
                <Tabs>
                    <telerik:RadTab runat="server" Text="Customer Details" Value="0" />
                    <telerik:RadTab runat="server" Text="Practice Info" Value="1" />
                    <telerik:RadTab runat="server" Text="Customer & Case Alerts" Value="6" />
                    <telerik:RadTab runat="server" Text="Calls & Notes" Value="2" />
                    <telerik:RadTab runat="server" Text="Cases" Value="3" />
                    <telerik:RadTab runat="server" Text="Accounting" Value="4" />
                    <telerik:RadTab runat="server" Text="Sales" Value="5" />
                    <telerik:RadTab runat="server" Text="Attachments" Value="7" />
                    <telerik:RadTab runat="server" Text="Education Courses" Value="8" />
                </Tabs>
            </telerik:RadTabStrip>
        </div>
        </form>
    </body>
    </html>

    Please note that this problem is not occurring in my internet explorer browser. I've tested with IE9 & IE11. 
    I am using telerik version 2015.3.1111.40 . Previously I was using 2014.1.225.40 . The amazing fact is this problem doesn't occur on my previous version. This is occurring on the latest version.

    Observation:

    • If I add more tabs so that the scroll bar is displayed from the beginning then after re sizing this issue doesn't occur. 
    • If I change the text of the last tab "Education Courses" to something smaller (say 3 letters) then the problem doesn't occur.

     

    Please shed some light on this issue. Thanks

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 15 Jan Link to this post

    Hello Asif,

    We tested the TabStrip from the posted markup with version 2015.3.1111 of our controls in IE9, IE11, Chrome and Firefox and the behavior was consistent in all browsers: a scroll bar appears on resizing the window but no tabs are moved to a second line. Here's a short video showing how it behaves in IE11 (and in the other tested browsers). Could you please check whether you are running IE in compatibility mode, because if it is turned on the emulation of older unsupported browsers could lead to unexpected behavior?

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jongalala
    Jongalala avatar
    7 posts
    Member since:
    Jul 2013

    Posted 16 Jan in reply to Ivan Danchev Link to this post

    This doesn't occur on my Internet explorer either. But whenever I show this page within a web browser control from a win form application then the problem occurs. Please create a win form application with a web browser control. Display this page on the web browser control. You will be able to reproduce this issue. Thanks for you reply.
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 19 Jan Link to this post

    Hello Asif,

    Using Ajax controls in win forms applications is not a supported scenario and it is highly possible the js and the styles the controls rely upon do not work correctly in the win form environment (web browser control). You can find the browsers the UI for ASP.NET AJAX suite supports here.  

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top