Важная проблема при загрузке datepicker

Я использую bootstrap datepicker на веб-сайте. Он также стилизован, чтобы быть липким, предоставляя родителям фиксированную позицию, нормально работающий но при тестировании на Ipad и Iphone (пока не тестировался на устройствах andriod), когда я прокручиваю вниз и пытаюсь коснуться даты, чтобы открыть его, он прокручивается назад в начало страницы, как я могу исправить эту проблему?

Аналогичная проблема возникает, когда я использую настраиваемый раскрывающийся список Selectric

Я создал простую полосатую версию проблемы здесь. Обратите внимание, что проблема не будет реплицироваться на эмуляторе, а на реальном мобильном устройстве или ipad.

Ответ 1

Попробуйте это

.dropdown-menu{
position: fixed!important
}

Ответ 2

Эта проблема найдена не связанной с конкретной средой (а не только для iOS) и имеет следующее решение:

Вы должны выяснить, какой тип datepicker div задает datepicker фактически из скрытого в видимый (который из них изменяется при успешном show and hide event).

Добавьте в свой css для этого класса (здесь modal-open) отсутствующую команду show:

body.modal-open {
    overflow: visible;
}

Теперь свиток должен оставаться на месте.

Пример ссылается на html как:

<body>
      <div class="modal-open">
            Datepicker
      </div>
</body>

Источник:

Bootstrap modal: фоновые переходы вверх на переключение

PS. У моего источника также есть 18 других вариантов, если это кажется слишком хакированным.

Я сделал этот текущий один раз, работал как шарм и не так сложно делать.

Ответ 3

Если вы просмотрите его в элементе инспекции, он создаст отдельный div в html, у которого есть позиция absolute, просто измените эту позицию на sticky, чтобы это произошло на изображении.

вы можете сделать это, добавив эту строку кода CSS:

.dropdown-menu {
  position: sticky;
}

Надеюсь, что это поможет вам