Chosen not working with tab bootstrap

Question

Sorry for my bad English.

I using Chosen width tab bootstrap (http://getbootstrap.com/javascript/#tabs). But have a problem.

Default tab KFC is active , when I click tab POST:

https://i.stack.imgur.com/iL1hi.png

I using Chosen v1.1.0 and bootstrap 3.

I tried

$('#a[data-toggle="tab"]').on('shown.bs.tab', function () {
  $('.chosen-select', this).chosen();
});

but failed.

Thanks for reading

Answer 1

Add CSS to apply the width

<style>
.chosen-container { width: 100% !important; }
</style>

Answer 2

As @luke_mclachlan suggested, try setting the with of chosen select accordingly

<script type="text/javascript">

    window.$(document).ready(function () {
        window.$(".chosen-select").chosen();
    });

    window.$('select').chosen({ width: '100%' });

</script>

Answer 3

Use this code:

    var first = true;
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        if (e.currentTarget.id == "tab2"){
            if (first){
                $('.chosen-select').chosen();
                first = false;
            }
            else
            {
                $('.chosen-select').trigger('chosen:updated');
            }
        }
    });