CODEWITHSUNDEEP
javascriptjqueryjquery-ui-tabs
vctlzac
vctlzac

Reputation: 847

JQuery tabs disordering when add

Run code follow and click in last tab of first rows tab.

http://jsfiddle.net/pKcJp/

<html>
</html>
<button id="addspan">Add tabs</button>
<div id="wrap">
    <ul></ul>
</div>

<script>
$(function () {
$('#wrap').tabs();
$('#addspan').click(function () {
    $('#wrap').tabs("add", "#page" + 1, 1);

    $('#wrap').tabs("add", "#page" + 2, 2);
    $('#wrap').tabs("add", "#page" + 3, 3);
    $('#wrap').tabs("add", "#page" + 4, 4);
    $('#wrap').tabs("add", "#page" + 5, 5);
    $('#wrap').tabs("add", "#page" + 6, 6);
    $('#wrap').tabs("add", "#page" + 7, 7);
    $('#wrap').tabs("add", "#page" + 8, 8);
    $('#wrap').tabs("add", "#page" + 9, 9);
    $('#wrap').tabs("add", "#page" + 10, 10);
    $('#wrap').tabs("add", "#page" + 11, 11);
    $('#wrap').tabs("add", "#page" + 12, 12);
            $('#wrap').tabs("add", "#page" + 13, 13);
            $('#wrap').tabs("add", "#page" + 14, 14);
            $('#wrap').tabs("add", "#page" + 15, 15);
            $('#wrap').tabs("add", "#page" + 16, 16);
            $('#wrap').tabs("add", "#page" + 17, 17);
            $('#wrap').tabs("add", "#page" + 18, 18);
            $('#wrap').tabs("add", "#page" + 18, 18);
            $('#wrap').tabs("add", "#page" + 18, 18);
});
});
</script>

See that have an disordering tabs.

This problem not occurs if Jquery version is changed to 1.7.2 and jquery-ui to 1.8.18(changed in menu)

Any Idea?

Upvotes: 1

Views: 64

Answers (1)

j08691
j08691

Reputation: 207901

This is because the jQuery UI CSS adds it's own class to the active tab and inserts a margin-bottom rule. Add your own to override it.

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom:0;
}

jsFiddle example

Upvotes: 3

Related Questions