CODEWITHSUNDEEP
vue.jsbuefy
robcaa
robcaa

Reputation: 191

Set buefy <b-dropdown> element to full width

How can I change the item to fill the 100% width?

Can't found any option for this, and I can not apply css rules to the .dropdown-trigger element.

Upvotes: 0

Views: 2645

Answers (2)

tiennguyen
tiennguyen

Reputation: 165

Now, Buefy dropdown already has expanded property. You can make b-dropdown as fullwidth like this:

<b-dropdown expanded>
</b-dropdown>

See more props here

Upvotes: 0

Tanner
Tanner

Reputation: 2421

Example Pen: https://codepen.io/Qumez/pen/RwPWeRV

The b-dropdown component appears to be div.dropdown -> div[role="button"] -> button So by giving the div and it's child div, and the grandchild button all a width of 100%, I was able to get the component to expand to the full width.

<div class="dropdown-box">
  <b-dropdown aria-role="list">
    <button class="button is-primary" slot="trigger">
      <span>Click me!</span>
      <b-icon icon="menu-down"></b-icon>
    </button>

     <!-- b-dropdown-items -->
  </b-dropdown>
</div>

.dropdown-box {
    border: 2px solid red;
    div, button {
        width: 100%;
    }
}

Upvotes: 0

Related Questions