Hello,
it seams to be a problem with the radTabStrip on ScrollChildren = true active. There appear to be an internal width issue that breaks the design on browser resize. Here's the scenario:
I have this in a page:
Here is the issue i found out:
Considerring all the tabs i have in the ASPX, when i resize the browser it works as it supposed. That is, the scroll button appears and the tab strips are correctly displayed in one row.
Now, if you remove the last RadTab ("Personal Notes"). The page loads correctly, but when you try to resize a few pixels the browser, the scroll buttons appear correclty, but the last TAB (and only the last tab) is displayed on a second row..and this is not as it supposed to work.
My guess is that is not the number of tabs, but the total width of the tabs, because if i dont remove the last tab ("Personal Notes"), but
insterad i rename the 3rd tab from "Customer & Case Alerts" into "Alerts", the design breaks again, placing the last tab on a second row.
This behavior was found in IE9 and is working as intended in FF
I have the last Q2 2012 version and i also attach two snapshots for error 1: (last tab removed) and error 2: (dont remove lat tab, instead rename the 3rd tab to shorter name)
it seams to be a problem with the radTabStrip on ScrollChildren = true active. There appear to be an internal width issue that breaks the design on browser resize. Here's the scenario:
I have this in a page:
<
telerik:RadTabStrip
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"
/>
<
telerik:RadTab
runat
=
"server"
Text
=
"Personal Notes"
Value
=
"9"
/>
</
Tabs
>
</
telerik:RadTabStrip
>
Here is the issue i found out:
Considerring all the tabs i have in the ASPX, when i resize the browser it works as it supposed. That is, the scroll button appears and the tab strips are correctly displayed in one row.
Now, if you remove the last RadTab ("Personal Notes"). The page loads correctly, but when you try to resize a few pixels the browser, the scroll buttons appear correclty, but the last TAB (and only the last tab) is displayed on a second row..and this is not as it supposed to work.
My guess is that is not the number of tabs, but the total width of the tabs, because if i dont remove the last tab ("Personal Notes"), but
insterad i rename the 3rd tab from "Customer & Case Alerts" into "Alerts", the design breaks again, placing the last tab on a second row.
This behavior was found in IE9 and is working as intended in FF
I have the last Q2 2012 version and i also attach two snapshots for error 1: (last tab removed) and error 2: (dont remove lat tab, instead rename the 3rd tab to shorter name)