Remove Padding in JQuery UI tab

Question

I want to move the text more closer to left...

ok with the shown picture above, I want to override the padding of my jquery-ui-tab page. I tried already the code below but seems not to be working.

$(".ui-tabs.panel").css('padding','0px');

now how can I make this possible?,

NOTE: I want a css or jquery override and i don't want to alter any jquery-ui css files

Answer 1

You can do that with plain css; try this for example:

Include this in your main stylesheet:

.ui-tabs .ui-tabs-panel {
    padding: 1em 1.4em 1em 0;
}

Answer 2

Old question but this works nicely. Assuming you have a containing div with a class of 'style-tabs' like so:

<div id="tabs" class="style-tabs">
<ul>
<li><a href="ajax/MyTab.php">My Tab</a></li>
<li><a href="ajax/MyTab2.php">My Tab 2</a></li>
<ul>
</div>

This CSS works nicely (setting a negative margin)...

.style-tabs li a { 
    margin: -0.3em; 
    padding: 0; 
 }