Question

I have multiple tabs with different forms and I use Jquery selectBox plugin inside that tabs to replace selects.

The problem is with tabs or selectBox plugin somehow tabs css display:block; changing selectBox plugin width and two same selects in different tabs have different width it is very small width difference but in nice form it looks very bad.

Here is demo with the problem: http://jsfiddle.net/kvdKr/1/

Anyone know how to fix this ? Thanks

UPDATE:

Solved this issue by using $(“select”).selectBox(‘destroy’); before tab is opened and used $(“select”).selectBox(); again and this solves the problem. More details there: https://github.com/claviska/jquery-selectBox/issues/11

Answer 1

So while I don’t know what the direct problem is, here is where it is caused:

    <div class="box"> <!-- I took the visible out of the class, if you only do this it will fix your problem, your select boxes will be the same width -->
    <select id="amount" name="amount">
        <option value="select">Amount</option>
        <option value="1">500</option>
    </select>
</div>

<div class="box">
    <select id="amount" name="amount">
        <option value="select">Amount</option>
        <option value="1">500</option>
    </select>
</div>

Then I added this line in your .ready function:

$(document).ready(function(){
   $("select").selectBox();
   $('div.box').first().addClass('box visible');// <== So now I forced your box visible class on .ready and it works like a dream
});

It’s a workaround, I admit, but it’s not THAT much code and it works 😉