Align one tab to the right in JQuery UI

Question

I have a set of tabs, representing different sections of a form, all aligned to the left. When a user has filled in all sections, I want him to be able to review the entire form.

I'm using jQuery UI Tabs to split the sections in different parts. The user can switch between the sections as often as he wants.

I now want the following:

• The section tab headers should be aligned to the left (this is default for jQuery UI)
• The printing overview tab header should be aligned to the right and (possibly) have a different style

So the question is: how can I change the style of an individual tab in jQuery UI?

Purifoy

Answer 1

you should be able to set an id or class attribute on the tab you want right aligned, you can then set the css for that id or class, you may need to use !important after your custom styling so that the jqueryui stylesheet will be overridden with your settings

http://jsfiddle.net/4Xmkf/1/

here's a jsfiddle showing a simple example

Britt

Thank you. When I used an id for the tab, !important was not neccesary. – Purifoy

Answer 2

I think you could do this with CSS. If you build your tabs from a <ul>, then just add a class to the last <li> (the overview one), and use CSS to float it to the right.

You should be able to use that class to do whatever other styling you want, too.

Hope this helps!

Dowdell