Width doesn't update when triggering liszt:updated #533

Closed
scriby opened this Issue Mar 19, 2012 · 2 comments

Comments

Projects
None yet
3 participants

scriby commented Mar 19, 2012

This is related to some other general issues around wiring up the control while it's hidden...

In my case the chosen control is bound when there is only one item in the list box. Then, later on more items get added, so I trigger liszt:updated. I have a case where the added options are considerably longer than the original option, but the list doesn't resize to accomodate.

I understand that you're not going to be able to read the width of the display:none select box, but it should be possible to move it off the screen to the left, show it, recalculate widths, then hide it and move it back. A similar technique would also work for wiring up display;none lists...

Thanks for looking at this,

Chris

Hi, try to include a 'resize' event on your chosen.jquery.js file:
ex:

AFTER:
this.form_field_jq.bind("liszt:updated", function(evt) {
return _this.results_update_field(evt);
});
INCLUDE THIS:
this.form_field_jq.bind("liszt:resize", function(evt) {
return _this.results_resize(evt);
});
AND AFTER:
AbstractChosen.prototype.results_update_field = function() {
if (!this.is_multiple) this.results_reset_cleanup();
this.result_clear_highlight();
this.result_single_selected = null;
return this.results_build();
};
INCLUDE THIS:
AbstractChosen.prototype.results_resize = function() {
this.f_width = this.form_field_jq.outerWidth();
dd_width = this.f_width - get_side_border_padding(this.dropdown);
sf_width = dd_width - get_side_border_padding(this.search_container) - get_side_border_padding(this.search_field);
this.container.css({"width": this.f_width + "px"});
this.dropdown.css({"width": dd_width + "px"});
this.search_field.css({"width": sf_width + "px"});
return this.results_build();
};

then you just have to call $('#your_SELECT_id').trigger("liszt:resize");

Contributor

pfiller commented Apr 18, 2013

I could see how this would be annoying, but it definitely falls under the header of "edge case". Adding this kind of functionality to Chosen would create complexity that only serves to benefit a tiny minority of people using the plugin. The easiest workaround to something like this would be to simply define a width on the initial select -- that way, you have room for new values to fit into.

@pfiller pfiller closed this Apr 18, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment