Environment
- fresh Drupal installation (core 7.31)
- installed shs (7.x-1.6+39-dev)
- installed chosen (7.x-2.0-beta4+1-dev)
- downloaded Chosen library (1.2.0) and copied to sites/all/libraries
- using Firefox (32.0.3), Windows 7 Pro SP 1

Steps to recreate the issue
- use devel to create a random vocabulary and terms
- create a new content type, and add a new term reference field using the SHS widget
- "always" output this field with Chosen (or else it won't load on the form)

And I get this (see screenshot attached).
screenshot

Where:
- 2 dropdown menus are showing up (1 created by SHS, and another created by chosen)
- the second dropdown (created by chosen) has the width set at 0px

Solution (could the maintainer review this?)
You have to do 3 things in shs.js to fix the above issue (patch file included)

1. use the patch in https://www.drupal.org/node/2076877 to fix the width issue
2. replace
$element.css('display','inline-block');
with
$element.css('display','none');
this hides the first dropdown menu (created by SHS)
3. search for
chzn
and replace with
chosen
this is for multi-level selects where SHS does not remove the child dropdown when the parent dropdown value is "- None -"

CommentFileSizeAuthor
#10 chosen-css-shs-fix-2358437.patch296 bytessja1
#10 shs-chosen-width-2358437.patch3.95 KBsja1
#7 shs_chosen_width_display_rev_2.patch4.56 KBabrlam
#2 shs_chosen_width_display_rev_1.patch1.17 KBabrlam
shs_chosen_width_display.patch2.67 KBabrlam
shs_chosen_screenshot.png30.54 KBabrlam

Comments

abrlam’s picture

abrlam commented
Component: User interface » Code
abrlam’s picture

abrlam commented
StatusFileSize
new shs_chosen_width_display_rev_1.patch1.17 KB

Scratch the previous solution. Here's a better one. It's more to the point (all the changes are done in function elementConvertToChosen) and compatible with the "Output this field with Chosen" setting.

New Solution (could the maintainer review this?)
You still have to do 3 things in shs.js to fix the above issue (patch file included)

1. use the patch in https://www.drupal.org/node/2076877 to fix the width issue
2. set Drupal.settings.chosen.minimum to 0 when it's undefined
3. return true instead of $element.hasClass('chzn-done')

abrlam’s picture

abrlam commented

Sorry guys, I have to make another change on the patch.

The child dropdown is still shown when the parent dropdown is set as none.

I will come up a workable patch (without creating new bugs) soon.

sja1’s picture

sja1 commented

I'm having this same issue. Step 2 of your proposed solution is to apply the patch in 2076877, however that patch's author states in comment #3 of that issue that the patch in https://www.drupal.org/node/1969666 may be a better approach. It also purports to fix some other issues as well.

I have tried the patch in 1969666 and it fixes the width problem, but not the problem with the SHS widget failing to hide.

@abrlam, have you been able to fix the problem you mention when the parent dropdown is set as none?

abrlam’s picture

abrlam commented

@sja1 unfortunately, I've been busy lately so I'm still trying to fix it. Have you made any attempts?

sja1’s picture

sja1 commented

There's a comment in shs.js that says:

// Chosen will not apply properly to hidden select element: it does not set
// the proper width to its container.
// Our select element is hidden by default, so we show it here and let
// Chosen hide the element back when it has finished with it.

Apparently Chosen is not hiding it back. Perhaps there's a problem caused by the classes being added by shs that's causing it. As I don't know javascript, I'm afraid that's as far as I can get with this.

abrlam’s picture

abrlam commented
StatusFileSize
new shs_chosen_width_display_rev_2.patch4.56 KB

OK, I think I got it.

Some conditions:
Output this field with Chosen: always

Make sure you are using the following versions
Simple hierarchical select 7.x-1.6+42-dev
Chosen 7.x-2.0-beta4
Chosen Library 1.1.0

Patching instructions (2 steps):

1. patch shs.js (see attached)
2. in chosen-drupal.css (Chosen Module), find the following line
display: inline-block !important;

replace with the following (remove !important):
display: inline-block;

That should do the trick. Good luck!

sja1’s picture

sja1 commented

Hey, that's great! Your fix is working for me, both on a views exposed filter and on a term reference on a node creation/edit form. Since the fix spans two modules, does an issue need to be raised in the chosen project in order for this to be committed?

Thanks a lot for sharing your solution!

abrlam’s picture

abrlam commented

That's great!

I might need to file a new issue on chosen about the CSS change. Let me do a bit of backtracking beforehand.

In the meantime, keep trying the fix until it breaks.

sja1’s picture

sja1 commented
StatusFileSize
new shs-chosen-width-2358437.patch3.95 KB
new chosen-css-shs-fix-2358437.patch296 bytes

Rerolled against latest dev, and added second patch for chosen-drupal.css (in the chosen module).

stborchert’s picture

stborchert
he/him
Primary language German
commented
Status: Needs review » Closed (duplicate)
Related issues: +#2084019: Support Drupal Chosen 7.x-2.0-alpha3 using Chosen v1.0

Closing this issue in favor of #2084019: Support Drupal Chosen 7.x-2.0-alpha3 using Chosen v1.0 to bundle the update to Chosen 1.x.

Btw.: patches for the chosen module should go into the chosen issue-queue ;)