CODEWITHSUNDEEP
twitter-bootstrapjquery-chosenprototype-chosen
Đặng Quang Huy
Đặng Quang Huy

Reputation: 31

Chosen not working with tab bootstrap

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.sstatic.net/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

Upvotes: 3

Views: 2366

Answers (3)

Seyyed Ali Firoozi
Seyyed Ali Firoozi

Reputation: 1

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');
            }
        }
    });

Upvotes: 0

Saqib
Saqib

Reputation: 2273

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>

Upvotes: -1

Raju Singh
Raju Singh

Reputation: 780

Add CSS to apply the width

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

Upvotes: 8

Related Questions