Hi,
Is there a way to have both left and right-aligned tabs in the same tabstrip ? For example, I'd like to something like this :
Tab1, Tab2, Tab3 [SPACE] Tools, Help
Is there a way to do that?
Thanks a lot,
Dominic
Tabstrip v2008.3.1204.35
Is there a way to have both left and right-aligned tabs in the same tabstrip ? For example, I'd like to something like this :
Tab1, Tab2, Tab3 [SPACE] Tools, Help
Is there a way to do that?
Thanks a lot,
Dominic
Tabstrip v2008.3.1204.35
6 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
Rank 2
answered on 22 Dec 2008, 10:29 AM
Hello Dominic,
To create a gap between tabs in a RadTabStrip, you can set a separator tab with a specific width and empty text as shown below:
aspx:
For more information on seperators, you can go through this link.
Thanks
Princy.
To create a gap between tabs in a RadTabStrip, you can set a separator tab with a specific width and empty text as shown below:
aspx:
| <telerik:RadTabStrip ID="RadTabStrip1" runat="server" AutoPostBack ="true" > |
| <Tabs> |
| <telerik:RadTab Text="Tab1"></telerik:RadTab> |
| <telerik:RadTab Text="Tab2"></telerik:RadTab> |
| <telerik:RadTab Text="Tab3"></telerik:RadTab> |
| <telerik:RadTab Text="" Width="200px" IsSeparator="true"></telerik:RadTab> |
| <telerik:RadTab Text="Tools"></telerik:RadTab> |
| <telerik:RadTab Text="Help"></telerik:RadTab> |
| </Tabs> |
| </telerik:RadTabStrip> |
For more information on seperators, you can go through this link.
Thanks
Princy.
0
dstj
Top achievements
Rank 1
Rank 1
answered on 22 Dec 2008, 02:13 PM
Thanks Princy for your reply,
This allows to set a fixed-width space, but doesn't seem to permit to have the two right tabs right-aligned.
What I really want is :
Tab1, Tab2, Tab3 [<===== right align =====>] Tools, Help
I'll set my TabStrip's width to 100% and the number of left-aligned tabs depend on the user settings. So to use your suggestion, I'll need to programmatically calculate : space = totalWidth - leftTabWidth. Is they a way to do that?
Thanks for your help,
dstj.
This allows to set a fixed-width space, but doesn't seem to permit to have the two right tabs right-aligned.
What I really want is :
Tab1, Tab2, Tab3 [<===== right align =====>] Tools, Help
I'll set my TabStrip's width to 100% and the number of left-aligned tabs depend on the user settings. So to use your suggestion, I'll need to programmatically calculate : space = totalWidth - leftTabWidth. Is they a way to do that?
Thanks for your help,
dstj.
0
Hello dstj,
In general, it would be much easier to use two tabstrip controls.
All the best,
Paul
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
In general, it would be much easier to use two tabstrip controls.
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| .rtsLevel |
| { |
| width: auto !important |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <div style="width: 100%; border: solid 1px red; overflow: hidden"> |
| <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Style="float: left" Skin="Outlook"> |
| <Tabs> |
| <telerik:RadTab runat="server" Text="Root RadTab1"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Root RadTab2"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Root RadTab3"> |
| </telerik:RadTab> |
| </Tabs> |
| </telerik:RadTabStrip> |
| <telerik:RadTabStrip ID="RadTabStrip2" runat="server" Style="float: right" Skin="Outlook"> |
| <Tabs> |
| <telerik:RadTab runat="server" Text="Tools"> |
| </telerik:RadTab> |
| <telerik:RadTab runat="server" Text="Help"> |
| </telerik:RadTab> |
| </Tabs> |
| </telerik:RadTabStrip> |
| </div> |
| </form> |
| </body> |
| </html> |
All the best,
Paul
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
dstj
Top achievements
Rank 1
Rank 1
answered on 29 Dec 2008, 03:17 PM
Hi, thanks for the reply.
Using two separate tabstrips renders unusable many of the cool features of the tabstrip. For example, I'll have to manually ensure that only one tab among the two tabstrips is selected...
Multipage, ClientAPI, etc will also be hard to use...
dstj.
Using two separate tabstrips renders unusable many of the cool features of the tabstrip. For example, I'll have to manually ensure that only one tab among the two tabstrips is selected...
Multipage, ClientAPI, etc will also be hard to use...
dstj.
0
Hello dstj,
You can achieve your goal by using custom JS only. Here's a sample code snippet.
Regards,
Paul
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
You can achieve your goal by using custom JS only. Here's a sample code snippet.
| <body onresize="pageLoad()"> |
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <script type="text/javascript"> |
| function pageLoad() |
| { |
| var tabstrip = $find('<%= RadTabStrip1.ClientID %>'); |
| var mySeparator = tabstrip.findTabByValue("sep1"); |
| var separatorIndex = mySeparator.get_index(); |
| var tabstripItems = tabstrip.get_tabs(); |
| var targetWidth = tabstrip.get_element().offsetWidth; |
| for (var i = 0; i < separatorIndex; i++) { |
| targetWidth -= tabstripItems.getItem(i).get_element().offsetWidth; |
| } |
| for (var i = separatorIndex + 1, len = tabstripItems.get_count(); i < len; i++) { |
| targetWidth -= tabstripItems.getItem(i).get_element().offsetWidth; |
| } |
| mySeparator.get_element().style.width = targetWidth + 'px'; |
| } |
| </script> |
| <telerik:RadTabStrip Skin="Outlook" ID="RadTabStrip1" runat="server" Width="100%"> |
| <Tabs> |
| <telerik:RadTab Text="Tab1 tab1"> |
| </telerik:RadTab> |
| <telerik:RadTab Text="Tab2"> |
| </telerik:RadTab> |
| <telerik:RadTab Text="Tab3 Tab3 Tab3"> |
| </telerik:RadTab> |
| <telerik:RadTab Text=" " IsSeparator="true" Value="sep1"> |
| </telerik:RadTab> |
| <telerik:RadTab Text="Tools"> |
| </telerik:RadTab> |
| <telerik:RadTab Text="Help"> |
| </telerik:RadTab> |
| </Tabs> |
| </telerik:RadTabStrip> |
| </form> |
| </body> |
Regards,
Paul
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
dstj
Top achievements
Rank 1
Rank 1
answered on 30 Dec 2008, 03:28 PM
Thanks for this. This will probably work just fine...
I only added a Width="100%" attribute to make it work in Firefox, Opera, Safari and Chrome too.
I only added a Width="100%" attribute to make it work in Firefox, Opera, Safari and Chrome too.