Align one tab to the right in JQuery UI

jquery jquery-ui alignment jquery-ui-tabs
Scharrels picture Scharrels · Mar 2, 2011 · Viewed 7.1k times · Source

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?

Answer

MikeM picture MikeM · Mar 2, 2011

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

Related questions

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from jQuery UI as the stand alone picker. I have this code: <div id="datepicker"></div> And the following JS: $('#datepicker').datepicker(); When I try to return the value …

Read More
Find out whether radio button is checked with JQuery?

I can set a radio button to checked fine, but what I want to do is setup a sort of 'listener' that activates when a certain radio button is checked. Take, for example the following code: $("#element").click(function() { $('#…

Read More
check / uncheck checkbox using jquery?

I have some input text fields in my page and am displaying their values using JavaScript. I am using .set("value","") function to edit the value, add an extra checkbox field, and to pass a value. Here I want to …

Read More