CODEWITHSUNDEEP
c#asp.netinternet-explorer-8tabcontainer
mcabral
mcabral

Reputation: 3558

Positioning tabs in TabContainer

I'm working with ajaxtoolkit:TabContainer.

I need to add two tabs (which i can do) but i need one of the tab headers in the far left and the other in the far right.

I've been playing with CSS (float:left; etc;) but i can't separate them! They always show themselves glued together one after the other.

Is it possible to separate the tab headers?

EDIT:

As @1stein commented i could use 

.ajax__tab_header :nth-child(2) { float: right !important; }

and that will do the trick. The problem is, this solution does not work in IE8 which is the browser i'm targeting. Are there any workarounds for this?

Upvotes: 2

Views: 1098

Answers (2)

IUnknown
IUnknown

Reputation: 22478

You may use this style (doesn't works in IE below 9th version):

.ajax__tab_header :nth-child(2)
{
    float: right !important;
}

Or you can apply style via javascript (right below the ScriptManager):

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

    function pageLoaded(sender, args) {
        $get("<%= TabPanel2.ClientID %>_tab").setAttribute("style", "float:right");
    }
</script>

Where the TabPanel2 is ID of TabPanel which you need to move right.

Upvotes: 1

BentOnCoding
BentOnCoding

Reputation: 28228

=D Selectivizr

Check out this js library... it will fix your css selector issue

Upvotes: 0

Related Questions