fluid form: chosen does not resize #300

Closed
heldchen opened this Issue Oct 19, 2011 · 3 comments

Projects

None yet

3 participants

@heldchen

the (native) form elements in my current project all use "width: 100%" to always use the full container width. now that works fine with chosen as well, at least until the container itself is resized. chosen currently seems to use markup using pixel values even when the replaced select-element was using percentage widths, and thus doesn't resize itself.

is there a way to have chosen either use percentages as well or resize itself if the parent element (the page / the form / the field set) is resized?

Contributor
pfiller commented Oct 20, 2011

This is essentially a duplicate of #210 and, unfortunately, there isn't currently a workaround.

@pfiller pfiller closed this Oct 20, 2011

the following patch makes the Chosen box resize itself together with the parent element. it's a bit ugly as i had to introduce a new optional config value ("width") that would take a width in any format, even percentages. as a second disadvantages, the dropdown part is only resized when upon (re)opening it, so when the parent element is resized while the dropdown is show, it will not change its size. nevertheless, maybe it's still something worth considering for a future version.

Index: jquery.chosen.js
===================================================================
--- jquery.chosen.js    (revision 257)
+++ jquery.chosen.js    (working copy)
@@ -278,7 +278,7 @@
       container_div = $("<div />", {
         id: this.container_id,
         "class": "chzn-container" + (this.is_rtl ? ' chzn-rtl' : ''),
-        style: 'width: ' + this.f_width + 'px;'
+        style: 'width: ' + (this.options.width || this.f_width + 'px;')
       });
       if (this.is_multiple) {
         container_div.html('<ul class="chzn-choices"><li class="search-field"><input type="text" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>');
@@ -516,12 +516,15 @@
           this.result_do_highlight(this.result_single_selected);
         }
       }
+      dd_width = this.container.width() - get_side_border_padding(this.dropdown);
       dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
       this.dropdown.css({
         "top": dd_top + "px",
-        "left": 0
+        "left": 0,
+        "width": dd_width
       });
       this.results_showing = true;
+      this.search_field.css('width', (dd_width - get_side_border_padding(this.search_container) - get_side_border_padding(this.search_field)) + 'px');
       this.search_field.focus();
       this.search_field.val(this.search_field.val());
       return this.winnow_results();
Contributor

I've come up with a more complete fix for this problem : #407

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