Problem/Motivation

https://git.drupalcode.org/project/cshs/-/commit/def4786b9a458a72b83a9c9...
The issue started on that PR. 

$element['#none_label'] = \t('- Select -');
$element['#description'] = \t('The menu link is created below the selected menu item. Optionally, select additional levels to place the link deeper in the menu structure.');

The code above asks Drupal to add a label wrapper Div to the cshs menu. That div includes a flex class that collapses the column into horizontal row that squash together. Se attached file for an example.

Proposed resolution

Resolve the conflict by removing the flex style from that element.

Remaining tasks

CommentFileSizeAuthor
#12 DrupalCSHS-3201464-2.patch620 bytesbernardm28
#10 DrupalCSHS-3201464.patch550 bytesbernardm28
#9 Screen Shot 2021-03-03 at 4.18.41 PM.png24.77 KBbernardm28
#8 DrupalCSHS-3201464.patch578 bytesbernardm28
#4 Screenshot 2021-03-03 at 23.53.04.png518.22 KBbr0ken
#4 Screenshot 2021-03-03 at 23.58.41.png470.76 KBbr0ken
#4 Screenshot 2021-03-03 at 23.59.02.png428.98 KBbr0ken
#4 Screenshot 2021-03-03 at 23.59.33.png428.2 KBbr0ken
Screen Shot 2021-03-03 at 1.37.30 PM.png10.19 KBbernardm28

Comments

bernardm28 created an issue. See original summary.

bernardm28’s picture

bernardm28 commented
Issue summary: View changes
br0ken’s picture

br0ken
Primary language Ukrainian
commented
Priority: Major » Minor
Status: Active » Closed (works as designed)

I'm unable to find has-description piece in Drupal core and assume the issue exists only with your custom theme, turning it into a bug in a particular implementation but not in CSHS.

I found the small issue only for Claro (experimental theme) where classes from cshs_menu_link.css don't match what theme provides.

br0ken’s picture

br0ken
Primary language Ukrainian
commented
StatusFileSize
new Screenshot 2021-03-03 at 23.59.33.png428.2 KB
new Screenshot 2021-03-03 at 23.59.02.png428.98 KB
new Screenshot 2021-03-03 at 23.58.41.png470.76 KB
new Screenshot 2021-03-03 at 23.53.04.png518.22 KB

Forgot to attach the proofs.

utcwebdev’s picture

utcwebdev commented

The wrapper seems to be related to Thunder Admin, or possibly its parent, Seven. I don't see the same behavior when Claro is used as the admin theme, on the same site/codebase. The wrapper div and the associated flex style looks like it is coming from Thunder Admin's form-element.css (see attached screenshot).

Only local images are allowed.

With Claro set as the admin theme, the select group stacks vertically (see screenshot).

Only local images are allowed.

br0ken’s picture

br0ken
Primary language Ukrainian
commented

Pushed these to 2.x & 3.x accordingly:

  1. https://git.drupalcode.org/project/cshs/commit/7a3e4d6
  2. https://git.drupalcode.org/project/cshs/commit/b242c24

The changed selectors guarantee the matching elements across all core themes.

br0ken’s picture

br0ken
Primary language Ukrainian
commented
Title: CSHS menu link description label breaks the layout » Make sure selectors in `cshs_menu_link.css` matches elements regardless of the core theme
Status: Closed (works as designed) » Fixed
bernardm28’s picture

bernardm28 commented
Status: Fixed » Needs review
StatusFileSize
new DrupalCSHS-3201464.patch578 bytes

That fix did not work for me.
I was working on a patch in the meantime. Take a look.
Thanks for the quick reply!

bernardm28’s picture

bernardm28 commented
StatusFileSize
new Screen Shot 2021-03-03 at 4.18.41 PM.png24.77 KB

The second pictures show how it looks after. It set the flex assign by the description label to flex-direction column and it uses box-sizing to ensure the dropdown symbol stays in place and does not have an issue with Thunder admin theme or others. Number #9 is the after picture.

bernardm28’s picture

bernardm28 commented
StatusFileSize
new DrupalCSHS-3201464.patch550 bytes
br0ken’s picture

br0ken
Primary language Ukrainian
commented
Status: Needs review » Fixed

I'm sorry, but we cannot include fixes for everything in the module. You should be using that CSS on your own.

bernardm28’s picture

bernardm28 commented
StatusFileSize
new DrupalCSHS-3201464-2.patch620 bytes

That's fine, tks for the heads up though.
This last version merged both your code and the code that works for Thunder admin.
In case someone ask or it becomes another issue.
I tested with Claro and Thunder distribution 3.5.7

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.