Enlarging width of dropdown if its content is wider than the parent element and prevent line-break

[krannich]

Hi there,

first thanks for the great plugin!!!

I was playing around with your code a little bit to tweak its behavior.

Now the dropdown's width enlarges if the content is wider than its parent element (as the normal web browsers do). I also figured out a way to prevent line-breaking.

Here is my quick and dirty version:

1. Remove width from this piece of code (to allow future calculations of the contents width):

this.f_width - get_side_border_padding(this.dropdown), this.dropdown.css({
top: dd_top + "px",
}), this.search_field = this.container.find("input").first(), this.search_results =

1. Add the following lines before returning the results from function called chosen.prototype.results_build:

this.search_results.css("whiteSpace", "nowrap");
this.search_results.html(content);
var dk_width = this.search_results.width();
var dd_width = this.f_width - get_side_border_padding(this.dropdown);
dk_width = (dk_width < dd_width) ? dd_width : dk_width + 15;

this.dropdown.css({
width: dk_width + "px"
});

this.search_field.css({
width: dk_width - 40 + "px"
});

Please note that I am using twitter bootstrap (bootstrap-chosen) to style my elements, so the width might be different. Maybe you add the calculated width of the scrollbar and subtract the search_field components.

What do you think?

[pfiller]

Thanks for sharing @krannich. I believe #918 is a similar issue. We recently changed the way width works in Chosen so a lot of the code mentioned above would be outdated.