Chosen form element inside a hidden div receives a width of 0 [#2004342]

I have my Chosen form elements inside a collapsiblock block. If the status of the block is expanded, the chosen elements on the form initialize properly with their minimum width. However, if the collapsiblock containing the form element is collapsed when the page loads initially, then the Chosen elements inside have a zero-width.

After poking around a bit with the chosen.jquery library, I believe the solution is to specify the minimum width as an option like so inside of the module's provided chosen.js script:

options.width = Drupal.settings.chosen.minimum_width+'px';

I'll follow up opening this issue with a patch that proposes to do this.

Comment	File	Size	Author
#2	2004342-chosen-force-min-width-on-hidden-elements.patch	553 bytes	mstrelan
#2
#1	chosen-hidden-0-width-2004342-2.patch	543 bytes	tlarrieu
#1

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

tlarrieu CreditAttribution: tlarrieu commented 26 May 2013 at 03:01

File	Size
chosen-hidden-0-width-2004342-2.patch	543 bytes

Attaching patch file with suggested fix.

Comment #2

mstrelan CreditAttribution: mstrelan commented 27 May 2013 at 23:29

Status:

Active

» Needs review

File	Size
2004342-chosen-force-min-width-on-hidden-elements.patch	553 bytes

Attached patch is more respectful of the width as a minimum, as it will only force the width if the computed width is less than the minimum. It requires at least v0.9.13 of Chosen JS. I wonder if we could also tap in to vertical tabs and collapsible fieldsets to use a truly automatic width.

Comment #3

Mołot CreditAttribution: Mołot commented 19 June 2013 at 09:14

Works for me, but I needed to apply it manually. Now that part looks like that for me:

      $(Drupal.settings.chosen.selector, context)
        .not('#field-ui-field-overview-form select, #field-ui-display-overview-form select') //disable chosen on field ui
        .each(function() {
        if ($(this).find('option').size() >= Drupal.settings.chosen.minimum) {
          options.width = (($(this).width() < minWidth) ? minWidth : $(this).width()) + 'px';
          $(this).chosen(options);
        }
      });