chosen with bootstrap 3 not working properly

Question

I have this code which triggers a bootstrap modal and load its content via $.load(). the page I'm loading has a select element which I'm calling chosen on. Here's the code:

$('.someClick').click(function(e){ e.preventDefault(); x.modal('show'); x.find('.modal-body').load('path/page.html', function(response, status, xhr){ if(status =="success") $("select[name=elementName]").chosen(); }); });

the results I'm getting is like the following image:

Modal View

and this is my Html content:

 <select name="elementName" data-placeholder="Please work.." class="chosen-select"> <option value="test">Hi</option> <option value="test2">bye</option> </select>

@rt2800 - no, as you can see, chosen style is applied but the options are not loading / or its loaded but not displayed.!! — mamdouh alramadan
– mamdouh alramadan, Commented Sep 30, 2013 at 8:23

Koen. · Accepted Answer · 2014-11-13 09:50:15Z

Applying Chosen after the modal is shown should solve your problem:

$('#myModal').on('shown.bs.modal', function () { $('.chosen-select', this).chosen(); });

Or when Chosen was already applied, destroy and reapply:

$('#myModal').on('shown.bs.modal', function () { $('.chosen-select', this).chosen('destroy').chosen(); });

Fiddle here: http://jsfiddle.net/koenpunt/W6dZV/

So in your case it would probably something like:

$('.someClick').click(function(e){ e.preventDefault(); x.modal('show'); x.on('shown.bs.modal', function(){ x.find('.modal-body').load('path/page.html', function(response, status, xhr){ if(status == "success"){ $("select[name=elementName]").chosen(); } }); }); });

EDIT

To complement Chosen you can use the Chosen Bootstrap theme

I think you have a point here, I will try it and let you know. even that I thought I was applying chosen after the modal is shown by using the success logic on load method. I still think your idea of using on method to check the modal will be much better than modifying the core. +1 for now and I'll change the accepted answer once I check it ;)
This solved the problem but initially flashes the original bare html. This fixed it for me.

lexeek · Accepted Answer · 2014-09-19 23:34:38Z

20

Try this, I digged in chosen and found out that just need to pass options with "width" property like in this, or any other width value:

$("select").chosen({width: "inherit"})

edited Sep 19, 2014 at 23:34

answered Sep 19, 2014 at 23:19

lexeek

4105 silver badges8 bronze badges

2 Comments

Bedros Over a year ago

this worked perfect for me, thanks, however I used $(".chosen").chosen({width: "inherit"});

LeoTM Over a year ago

inherit for me tries to inherit the width of each letter typed for the first word, creating thin vertical dropdowns dynamically. 100% fixed it for me.

cg.mike · Accepted Answer · 2013-09-30 09:10:04Z

As described in Allow Chosen to be used in Bootstrap modal, the problem is within the chosen.jquery.js file. I found it on line 435 and just added the following code inside the else statement. check it out, it worked for me.

// Fixing problem when the select is not displayed. if ( this.form_field.offsetWidth == 0 ) { return "" + $(this.form_field).width() + "px"; }

Modifying the source is not a real solution as this creates problems when upgrading..

Gunasegar · Accepted Answer · 2015-11-14 10:49:57Z

Adding width to your chosen class will solve this problem.

$('.someClick').click(function(e){ e.preventDefault(); x.modal('show'); x.on('shown.bs.modal', function(){ x.find('.modal-body').load('path/page.html', function(response, status, xhr){ if(status == "success"){ $("select[name=elementName]").chosen({ width:'100%' }); /* add width here !!! */ } }); }); });

MRH · Accepted Answer · 2017-10-23 22:33:38Z

I had the same problem today but I needed a quickly solution... but firs a screenshot of my problem:

This is my problem

so I did this:

1) The problem is the "width", so I saw on console this

take a look on the console, over the "select"

2) I made a quickly solution adding a new "width". As you can see in the previous image, there is a class 'class="chosen-container chosen-container-single', so I took the class "chosen-container" to add the new "width" when I call my "Modal". Here my code:

just add one line

so, basically I added this code:

$('.chosen-container').css({ 'width':'350px' });

to the function that call the modal. Feel free to copy and paste this on your function :) Maybe it is not a perfect solution but it works for me and maybe for you too.

sorry for my english, but I'm learnig. I speak spanish better than english. Greetings

PD: There is my result

$('.chosen-container').css({ 'width':'100%' }); worked for me

KirEvse · Accepted Answer · 2014-08-14 15:09:11Z

The following solution worked for me (from http://codepen.io/m-e-conroy/pen/ALsdF):

Redefine "modal" class:

.modal { display: block; }

Collectives™ on Stack Overflow

chosen with bootstrap 3 not working properly

6 Answers 6

2 Comments

2 Comments

2 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

2 Comments

Comments

1 Comment

Comments

Linked

Related