Chosen: Chosen not styling properly in a bootstrap 3.x dialog.

Created on 31 May 2017 · 6Comments · Source: harvesthq/chosen

Summarize your issue here.
Chosen not styling properly in a bootstrap 3.x dialog.

Steps to reproduce

load bootstrap's css
load load a dialog.
open the dialog

Additionally, please link to a working demo that shows the issue so we can attempt to reproduce. You can use this template as a base. Alternatively, confirm that the Chosen demo page shows the issue.

Expected behavior

to show the nicely styled & searchable dropdown

Actual behavior

here you go

Environment

Chosen Version:
chosen_v1.6.2/
jQuery or Prototype Version:
/jquery/1.11.2/jquery.min.js'
Browser and Version:
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0
OS and Version:
windows 10

Additional information

n/a

Source

lordspace

Most helpful comment

Ok, just to add an update on this.
When I pass the width at the initialization method all works without the hack above.

$("select").chosen({
                search_contains : true, // kwd can be anywhere
                max_selected_options: 1,
                max_shown_results : 5, // show only 5 suggestions at a time
                width: "95%",
                no_results_text: "Oops, nothing found!"
            } );

lordspace on 17 Jun 2017

👍3 ❤1

All 6 comments

Chosen 1.6.2 is not the latest version — do you still have your issue on the latest released version?

tjschuck on 31 May 2017

I will make sure I have it and let you know.

lordspace on 3 Jun 2017

Yes, the problem is still there even in latest 1.7 version.

I checked some stackoverflow topics and came up with this fix.

$('.modal').filter('[class*=_dialog]').on('show.bs.modal', function () {
                // This makes the dialog expand when shown in a bootstrap dlg
                $(this).find('.chosen-container').css({width: "100%"});
            });

The app is custom and for a client and can't provide a link to it.

lordspace on 5 Jun 2017

Ok, just to add an update on this.
When I pass the width at the initialization method all works without the hack above.

$("select").chosen({
                search_contains : true, // kwd can be anywhere
                max_selected_options: 1,
                max_shown_results : 5, // show only 5 suggestions at a time
                width: "95%",
                no_results_text: "Oops, nothing found!"
            } );

lordspace on 17 Jun 2017

👍3 ❤1

Thanks for the hack @lordspace. It took me quite some time to find your fix.

I'm not sure why this issue was closed in the "bootstrap-chosen" repo (https://github.com/alxlit/bootstrap-chosen/issues/54).