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

[lordspace]

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

[tjschuck]

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

[lordspace]

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

[lordspace]

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]

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!"
            } );

[pihug12]

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 (alxlit/bootstrap-chosen#54).

[lordspace]

No worries. Maybe I closed it assuming that it's not a bug if it's fixable via options but when I think about it now it should work out of the box.