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

[Solved] Tabs under RadTabStrip displays in two lines

3 Answers 257 Views

TabStrip

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

Jongalala asked on 12 Jan 2016, 12:43 PM

screenshot1.jpg

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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

3 Answers, 1 is accepted

answered on 15 Jan 2016, 11:26 AM

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

answered on 19 Jan 2016, 03:13 PM

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