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