vue.jsbuefy

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.


Solution

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