Выравнивание выпадающего меню Buefy, чтобы избежать отрыва - PullRequest
Новая
       41

Выравнивание выпадающего меню Buefy, чтобы избежать отрыва

0 голосов
/ 13 октября 2018

У меня выпадающий список Buefy, запускаемый значком, расположенным в правой части моей страницы.Когда я активирую его, левая сторона создаваемого меню выравнивается по значку, а правая часть меню, шире, чем значок, расширяется за пределы страницы вправо и отсекается, как можно видеть здесь: 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet"/>
    <div id="app" class="container-fluid">
      <section class="section">
        <div class="columns">
          <div class="column">Some info with dropdown menu at right ---&gt;</div>
          <div class="column is-narrow">
            <b-dropdown hoverable is-bottom-left>
              <i class="is-info" slot="trigger">@</i>
              <b-dropdown-item>Action</b-dropdown-item>
              <b-dropdown-item>Another action</b-dropdown-item>
              <b-dropdown-item>Something else</b-dropdown-item>
              </b-dropdown>
            </div>
          </div>
        </section>
      </div><!--#id="app"-->
  <script>
    const app = new Vue()
    app.$mount('#app')
    </script>

(Чтобы увидеть эффект, вам, вероятно, придется щелкнуть ссылку «Полная страница», чтобы окно окна результатов было достаточно широким, чтобы «@» не переносилось на левую сторону.)

Bulma имеет возможность выравнивать меню по правому краю, чтобы левая часть меню расширялась до страницы, делая ее полностью видимой.

https://bulma.io/documentation/components/dropdown/#right-aligned

Какполучить такой же эффект в Buefy?Я нахожу документы Buefy by-example чрезмерно краткими, но я подумал, что могу добавить «is-bottom-left» к элементу <b-dropdown>.Как показывает фрагмент кода, это не имеет никакого эффекта.

Далее, когда страница сужается, значок раскрывающегося списка будет перемещен в левую часть страницы.Предполагая, что есть исправление для вышеупомянутой проблемы, как вернуть выравнивание меню назад к тому, что было (выравнивание по левой стороне) в этом случае?

1 Ответ

0 голосов
/ 17 декабря 2018 
<b-dropdown class="is-right">
    ...                             
</b-dropdown>

просто используйте класс is-right для элемента b-dropdown

...