CODEWITHSUNDEEP
htmlcssdropdownshoelace
MadeInLagny
MadeInLagny

Reputation: 185

Shoelace.style dropdown panel sizing

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%;
}

Upvotes: 0

Views: 327

Answers (1)

exceptionee
exceptionee

Reputation: 132

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 the Edit button. To fix this issue I changed the .wrapper selector to .wrapper, sl-menu.

This is the final code.

@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css';

.wrapper, sl-menu {
  width: 300px;
}

sl-dropdown, sl-button, sl-dropdown::part(panel)  {
  width: 100%;
}
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace.js"></script>

<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>

Upvotes: 1

Related Questions