Adding new tab while existing tabs are hidden, adds them unwanted margin

[fdskiParticipant]

I used workaround posted at
http://www.jqwidgets.com/community/topic/how-i-can-hide-jqxtab-based-on-our-requirement/
to hide tabs.

To replicate my problem please go to:
http://jsfiddle.net/hpgre52e/1/
And do following:
1. Hide tab 3 button
2. add new tab button
3. show tab 3 button

Now visable tab3 will have extra margin-top 8px added.

Extra info: if new tabs added were given close buttons, tab3 would align properly after they are closed.

Any ideas ?

[DimitarParticipant]

Hello fdski,

Please note that the workaround given for hiding/showing tabs is not part of the jqxTabs API and such behaviour can be expected. As an additional workaround, you can do the following:

$('#jqxButton1').click(function () {
    $("#jqxTabs .jqx-tabs-title:eq(2)").css("display", "block");
    $("#jqxTabs .jqx-tabs-title:eq(2) .jqx-tabs-titleContentWrapper").css("margin-top", "0px");
});

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[fdskiParticipant]

Worked like a charm, thanks a bunch guys. 🙂

[Author]

Posts