Vuetify автозаполнение проблема стиля в прокручиваемом контейнере - PullRequest
Новая
       2

Vuetify автозаполнение проблема стиля в прокручиваемом контейнере

1 голос
/ 18 марта 2020

У меня есть приложение с боковой панелью и контейнером. Боковая панель - это высота экрана, но содержимое контейнера длиннее, поэтому я добавил overflow-x: hidden в контейнер css, чтобы добавить функцию прокрутки.

Теперь я пытаюсь добавить компонент автозаполнения Vuetify в контейнере. Но из-за этого стиля overflow-x раскрывающийся список компонента автозаполнения прокручивается вместе со страницей, а не прилипает к полю ввода.

Я создал кодовую ручку с некоторым упрощенным кодом со страницы документации Vuetify, поэтому вы Можно проверить поведение: https://codepen.io/brm49024/pen/PoqaBzM.

Итак, моя цель - чтобы при прокрутке выпадающий список придерживался поля ввода. Есть ли способ добиться этого?

1 Ответ

1 голос
/ 20 марта 2020

Одним из способов является настройка позиционированной высоты меню при прокрутке страницы.

Сначала добавьте следующий метод: 

 fixPosition () {
      const menu = document.getElementById("app").nextElementSibling
      if (!menu) return
      const input = this.$refs['scroll-track-input'].$el.getBoundingClientRect()
      menu.style.top = input.bottom - 50 + 'px'
    }

А затем в своем шаблоне укажите обработчик прокрутки для метода fixPosition и добавьте ссылку scroll-track-input к элементу автозаполнения. 

<main id="container" v-scroll:#container="fixPosition">
      <v-autocomplete 
        ref="scroll-track-input"
      />
</main>

рабочий пример https://codepen.io/ellisdod/pen/JjdBWPw

...