The initial CSS for this module is using float:left to put the select areas next to each other, causing wrapping issues on following fields

CommentFileSizeAuthor
#12 multiselect-css-wrapping-12576854-12.patch351 byteslamp5
#11 after.png78.6 KBvolkswagenchick
#10 css-improvment-2852660-10.patch784 bytesdani3lr0se
#8 css-improvement-2852660.png104.26 KBdani3lr0se
#7 multiselect-css-wrapping-12576854-7.patch563 bytesjoshua.roberson
#5 multiselect-patch-2-wide-2852660-4.png54.3 KBjoshua.roberson
#4 multiselect-thin-option-spacing-2852660-3.png64.86 KBjoshua.roberson
#4 multiselect-wide-float-2852660-3.png53.85 KBjoshua.roberson
#2 css-wrapping-2852660-2.patch2.73 KBkducharm
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

kducharm created an issue. See original summary.

kducharm’s picture

kducharm CreditAttribution: kducharm at CivicActions commented
FileSize
css-wrapping-2852660-2.patch2.73 KB

Patch to improve CSS using inline-blocks, at a later time the whole CSS should be redone

kducharm’s picture

kducharm CreditAttribution: kducharm at CivicActions commented
Status: Active » Needs review
joshua.roberson’s picture

joshua.roberson CreditAttribution: joshua.roberson commented
FileSize
multiselect-wide-float-2852660-3.png53.85 KB
multiselect-thin-option-spacing-2852660-3.png64.86 KB

I have the same issue where the field that follows the multiselect field floats to the right. I also noticed if the browser width is less, there is a spacing issue with each option in the multiselect.

joshua.roberson’s picture

joshua.roberson CreditAttribution: joshua.roberson commented
FileSize
multiselect-patch-2-wide-2852660-4.png54.3 KB

The patch fixes the float problem, but the multiselect layout is messed up now where the selected list is under the unselected list.

joshua.roberson’s picture

joshua.roberson CreditAttribution: joshua.roberson commented
Status: Needs review » Needs work
joshua.roberson’s picture

joshua.roberson CreditAttribution: joshua.roberson commented
Status: Needs work » Needs review
FileSize
multiselect-css-wrapping-12576854-7.patch563 bytes

Hidding one of the images where unselected and selected were above each other. From the CSS, it looks to be intentional.

This patch should fix the float issue. Tested on a Mac using FF and Chrome.

dani3lr0se’s picture

dani3lr0se CreditAttribution: dani3lr0se at Hook 42 commented
Status: Needs review » Reviewed & tested by the community
FileSize
css-improvement-2852660.png104.26 KB

This works for me. Patch me applied successfully and fixes the float issue. Tested on Mac with most recent version of Chrome. See attached screenshots. Thanks for the work on this. :)

nerdstein’s picture

nerdstein
he/him
Primary language English
Location United States
CreditAttribution: nerdstein as a volunteer and at Hook 42 commented
Status: Reviewed & tested by the community » Needs review

Currently the patch does not apply. I recently merged another issue that touched the CSS file. Re-roll needed

dani3lr0se’s picture

dani3lr0se CreditAttribution: dani3lr0se at Hook 42 commented
FileSize
css-improvment-2852660-10.patch784 bytes

Patch was rerolled. Here is an updated version since code has been merged into the project.

volkswagenchick’s picture

volkswagenchick
she/her
Primary language English
Location San Francisco Bay Area
CreditAttribution: volkswagenchick at Hook 42 commented
Assigned: kducharm » Unassigned
Status: Needs review » Reviewed & tested by the community
FileSize
after.png78.6 KB

Patch applied clean via simplytest.me. That patch appears to address the float issue. Screenshot attached. Marking RTBC

lamp5’s picture

lamp5
Primary language Polish
Location Rzeszow
CreditAttribution: lamp5 at abventor commented
FileSize
multiselect-css-wrapping-12576854-12.patch351 bytes

To fix it we do not need any extra tags in the code.

yaach’s picture

yaach CreditAttribution: yaach commented

Patch #12 fixed it for me.

joshua.roberson’s picture

joshua.roberson CreditAttribution: joshua.roberson commented

Using the dev branch without any patches, I could not reproduce this issue. I did some digging and it seems the following commit to the CSS file fixed the issue. Specifically adding this part:

.multiselect-wrapper:after {
+  content: "";
+  display: table;
     clear: both;
}

https://cgit.drupalcode.org/multiselect/commit/?id=fe09e47

That being said, I don't see a need for this patch anymore. Can anyone else confirm this as well?

Basically this other issue was added after this one as a duplicate but was not marked as such.
https://www.drupal.org/project/multiselect/issues/2981851

aleksip’s picture

aleksip
Primary language Finnish
Location Finland
CreditAttribution: aleksip commented

Can confirm #14.

mandclu’s picture

mandclu CreditAttribution: mandclu as a volunteer and at Acquia commented
Status: Reviewed & tested by the community » Closed (duplicate)
Related issues: +#2981851: Floats not cleared

Closing this as a duplicate of #2981851: Floats not cleared, which has already been merged.