I am looking for the way to set the shoelace dropdown panel width @100%, similar to the trigger button. Here is my code (pen). Only the trigger button resizes, not the panel. Any thoughts?
<div class="wrapper">
<div class="dropdown-selection">
<sl-dropdown>
<sl-button slot="trigger" caret>Edit</sl-button>
<sl-menu>
<sl-menu-item value="cut">Cut</sl-menu-item>
<sl-menu-item value="copy">Copy</sl-menu-item>
<sl-menu-item value="paste">Paste</sl-menu-item>
</sl-menu>
</sl-dropdown>
</div>
</div>
CSS
.wrapper {
width: 300px;
}
sl-dropdown, sl-button, sl-dropdown::part(panel) {
width: 100%;
}
The problem is that the menu isn't the child of the
Edit
button. That means that the menu doesn't try to adjust its width to that of theEdit
button. To fix this issue I changed the.wrapper
selector to.wrapper, sl-menu
.This is the final code.