Problem/Motivation

The contextual menu that shows the <sl-menu> is currently not really visible. When removing the type="checkbox" attribute from them we can at least read their names.

Steps to reproduce

  1. Open Layers
  2. Right-click on an element

Proposed resolution

Either we remove type="checkbox" here or there is another solution to restore the planned design for this.

CommentFileSizeAuthor
Screenshot 2025-06-21 at 01.57.09.png118.1 KByannickoo
Screenshot 2025-06-21 at 01.56.09.png76 KByannickoo

Issue fork display_builder-3531487

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

yannickoo created an issue. See original summary.

mogtofu33’s picture

mogtofu33 commented
Issue tags: +display_builder-1.0.0-alpha1
mogtofu33’s picture

mogtofu33 commented
Assigned: Unassigned » mogtofu33
Status: Active » Needs work
pdureau’s picture

pdureau commented

Hi Yannick,

Thanks for your issue. I am not reproducing it exactly.

With Olivero theme, when Layers panel is in the sidebar, instead of having a broken sl-menu, I have the browser menu:

On View region On sidebar
Builder panel ✅ OK ✅ OK
Layers panel ✅ OK ❌ not available
Tree panel ✅ OK ✅ OK

With UI Suite Bootstrap theme, the right-click sl-menu is always OK:

On View region On sidebar
Builder panel ✅ OK ✅ OK
Layers panel ✅ OK ✅ OK
Tree panel ✅ OK ✅ OK

So, Yannickoo, can you tell us more about your current setup?

mogtofu33’s picture

mogtofu33 commented
Title: [1.0.0-alpha1] Contextual menu looks broken » Contextual menu looks broken
Issue tags: -display_builder-1.0.0-alpha1 +display_builder-1.0.0-alpha2

What @yannickoo is pointing is that the menu can not be inspected (right click).
The type="checkbox" is used to make the click event work and propagate as seen in the shoelace menu.
I don't think we can remove this type, and I am not sure of the level of the issue here. Is there an accessibility problem?

yannickoo’s picture

yannickoo
Location Berlin
commented

I agree that removing the type="checkbox" needs to be there but I am still wondering what could be the reason that the contextual menu doesn't render properly in a custom theme.

mogtofu33’s picture

mogtofu33 commented
Assigned: mogtofu33 » Unassigned
Status: Needs work » Active

doesn't render properly in a custom theme.

Could you be more specific? Then the issue could be a conflict on the css with the custom theme?

mogtofu33’s picture

mogtofu33 commented
Component: display_builder_ui » UI/UX/Islands
Status: Active » Postponed (maintainer needs more info)
Issue tags: -display_builder-1.0.0-alpha2
pdureau’s picture

pdureau commented
Issue tags: +display_builder-1.0.0-alpha3
pdureau’s picture

pdureau commented
Issue tags: -display_builder-1.0.0-alpha3 +display_builder-1.0.0-alpha4

Waiting for answer. Moved to alpha4.

yannickoo’s picture

yannickoo
Location Berlin
commented
Status: Postponed (maintainer needs more info) » Closed (works as designed)

After a while I was able to figure out the root cause for this: Ensure that your normalize / reset CSS code is not having generic selectors like [type="checkbox"] but input[type="checkbox"] instead to avoid overriding the CSS style of the contextual menu items 💡

Closing this one but might be helpful for future ✨