Установите элемент buefy ‹b-dropdown› на полную ширину

Как я могу изменить элемент, чтобы он занимал 100% ширины?

Не удалось найти ни одной опции для этого, и я не могу применить правила css к элементу .dropdown-trigger.


vue.js buefy
person robcaa    schedule 12.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Пример пера: https://codepen.io/Qumez/pen/RwPWeRV

Компонент b-dropdown выглядит div.dropdown -> div[role="button"] -> button. Таким образом, предоставив div и его дочернему div, а также кнопке внука шириной 100%, я смог добиться расширения компонента до полной ширины.

<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%;
    }
}
person Tanner    schedule 12.02.2020
comment
Образец кода не работал, но я понял, в чем была ошибка: я использую css в стиле Vue scoped, но код css не применяется к элементу .dropdown-trigger. Поэтому я изменил стиль области действия на глобальный, а раскрывающийся список получил ширину 100%. - person robcaa; 15.02.2020
comment
Они действительно могли бы реализовать атрибут extended = true, как компонент кнопки. И добавляем этот scss: .is-extended {div, button {width: 100%; }} - person robcaa; 15.02.2020