How to align TabBar to the right?

[mattmacpherson]

trafficstars

I don't mean a right vertical menu, I mean like this:

I've played around with the CSS to no avail.

[mattmacpherson]

Anyone?

[Ohar]

@Method-X Looks like you are free to make a pull request with it.

[paranoidjk]

interesting，i think there actually is no something what we call direction of the tabs component.

maybe you can just simply set the defaultActiveKey to be the last tabKey?

[paranoidjk]

close for no response.

[mattmacpherson]

@paranoidjk The defaultActiveKey is already set to the last tab. For a live demonstration of what I mean, go here. For the time being, I had to resort to a CSS hack that still doesn't quite get it right. :/

[paranoidjk]

@Method-X looks fine? can you give a codepen demo?

[mattmacpherson]

@paranoidjk Thank you for the quick reply! Right now I'm using a really awkward css hack to kind of align it to the right:

.right-tabs-bar {
  margin-left: 64%;
}

If you look closely, you can tell it's not actually aligned to the right. That's the closest I could get it to the edge though. I'm definitely not a CSS guy so if anyone has any suggestions I'm all ears! Otherwise, I could tinker with the code and submit a pull request so this (wonderful!) package supports right aligned tabs natively.

[paranoidjk]

hmm, i understand your problem, But right now i do not have time to do this feature, you can use css to do it temporarily.

And PR is welcome.

[mattmacpherson]

@paranoidjk I will take a peek at the code first chance I get and submit a pull request. In the mean time, any idea how to do this with CSS? Floating right doesn't work.

[paranoidjk]

because ScrollInkTabBar set width to 9999px for scroll https://github.com/react-component/tabs/blob/master/assets/index/top.less#L21, float right won't work

[HeitorKun-Criasol]

has a better way of doing this been implemented already?

[smtlab]

Works perfectly - <Tabs value={1} style={{ float: 'right' }}></Tabs>