Выберите Dropdown, выходящий из экрана в мобильном представлении

Question

Я получил выпадающий список, который выходит из экрана в мобильном представлении. Я использую bootstrap класс form-control. Мой код, как показано ниже

<select name="service" formControlName="service" class="form-control shadow-none" style="width:100%">
      <option value="Select" selected>Select</option>
      <option value="Sedan" selected>Sedan</option>
      <option value="SUV" selected>SUV</option>
      <option value="Mini" selected>Mini</option>
</select>

Любая помощь будет оценена ...

Answer 1

Это только потому, что вы проверяете мобильное представление в браузере рабочего стола.

В реальных устройствах это не вызывает каких-либо проблем и отрегулируйте ширину в соответствии с шириной устройства.

и список выбора опций открывается по-разному, так как ОС означает, что на устройствах android он открывается в виде раскрывающегося списка, а на устройствах IOs он открывается как всплывающее окно.

попробуйте открыть эту страницу в режиме реального времени. Устройство не отображается в мобильном браузере настольного браузера.

Надеюсь, этот ответ очистит вас от всех сомнений.

Спасибо ...

Answer 2

Поскольку вы используете элемент select, то каждая операционная система телефона будет отображать список элементов, используя стиль по умолчанию.

iOS пример ссылка

Android пример ссылка

Answer 3

Вы можете попробовать использовать медиа-запросы для мобильных устройств и задать фиксированную ширину для элементов формы при загрузке ниже определенного разрешения: @mediaonlyscreenand(max-width:600px){select{width:200px!important;}}

Answer 4

Иногда это происходит, если вы работаете с адаптивными веб-приложениями. Это, вероятно, вызвано несовместимостью браузера, что приводит к ненормальному поведению.

Я предлагаю использовать свойство auto

<select name="service" formControlName="service" class="form-control shadow-none" style="width:auto">
      <option value="Select" selected>Select</option>
      <option value="Sedan" selected>Sedan</option>
      <option value="SUV" selected>SUV</option>
      <option value="Mini" selected>Mini</option>
</select>

Редактировать: Попробуйте выставить положение: абсолютное с шириной: 100%. должен вытащить этот div за пределы контейнера. Вы просите элемент растягиваться шире, чем его родитель, что обычно не рекомендуется.