Right Most Alignment for the last tab

4 posts, 0 answers
  1. Mohammad Aamir
    Mohammad Aamir avatar
    4 posts
    Member since:
    Jan 2010

    Posted 10 Mar 2010 Link to this post

     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.

  2. Yana
    Admin
    Yana avatar
    5043 posts

    Posted 12 Mar 2010 Link to this post

    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.
  3. Mohammad Aamir
    Mohammad Aamir avatar
    4 posts
    Member since:
    Jan 2010

    Posted 18 Mar 2010 Link to this post

    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.
  4. Yana
    Admin
    Yana avatar
    5043 posts

    Posted 18 Mar 2010 Link to this post

    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.
Back to Top