Right Most Alignment for the last tab

[Mohammad Aamir]

 Hi,

 I am creating a tab strip dynamically. I have some 5-6 tabs at the rootlevel. In my last tab i am creating a tab template which will have normal HTML controls for example a Logout link and someother links like that. My requirement is that the contents of my last tab should be always at the right most corner of the screen. Please refer the attached image of expected output. It should be like that on screen resize also, i mean in every situation they should be at the right most corner.

Currently i am doing it by calculating its offsetLeft and setting the paddingleft style property for the last tab dynamically on page load and on window resize event. Following is my code for that

    paddingLeft = tabStrip.get_element().offsetWidth - lastTab.get_element().offsetLeft - 80; // 80 is the width of the logout link

 

    lastTab.get_element().style.paddingLeft = paddingLeft;

But, it seems to break sometimes.

Please, suggest some more elegant way of doing it.

Thanx in advance.
Mohammad.

[Yana]

Hello Mohammad Aamir,

You can achieve this with the following code:

<telerik:radtabstrip id="TabStrip" runat="server" Width="100%" Skin="Vista">
<Tabs>
    <telerik:RadTab Text="Root RadTab1" />
    <telerik:RadTab Text="Root RadTab2" />
    <telerik:RadTab Text="Root RadTab3" />
    <telerik:RadTab Text="Root RadTab4" />
    <telerik:RadTab Text="Root RadTab5" OuterCssClass="rightTab" />
</Tabs>
</telerik:radtabstrip>

and the needed css styles:

<style type="text/css">
    div.RadTabStrip .rtsUL { float: none; background: #ccc }
    div.RadTabStrip .rightTab  {
        float: right;
    }
</style>

Best regards,
Yana
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Mohammad Aamir]

Hi Yana,

 I used your code and it did not work for me. I just created a new tabstrip exactly the way you have done, but i am not getting righ alignment for the last tab. My tabstrip looks like in image1, but when i add '!important' to my CSS style, my tabstrip looks like in picture image2.

   This is what i modified my CSS style to
   

    div.RadTabStrip .rightTab  {

        float: right !important;

    }



Regards,
Mohammad.


[Yana]

Hi Mohammad Aamir,

I'm sorry I tested it only in IE8 and Firefox, bu I guess that you're using IE7. Please modify the markup of the tabstrip like this:

<telerik:radtabstrip id="TabStrip" runat="server" Width="100%" Skin="Vista">
<Tabs>
    <telerik:RadTab Text="logout" OuterCssClass="rightTab" />
    <telerik:RadTab Text="Root RadTab1" />
    <telerik:RadTab Text="Root RadTab2" />
    <telerik:RadTab Text="Root RadTab3" />
    <telerik:RadTab Text="Root RadTab4" />

</Tabs>
</telerik:radtabstrip>

Greetings,
Yana
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.