Элемент OPTION внутри SELECT слишком длинный и нарушает макет мобильного устройства

У меня есть отзывчивый дизайн сайта, большинство из которых прекрасно работает.

На странице проверки, хотя у меня есть элемент Select для выбранной страны. Некоторые из вариантов очень длинные, например, «Конго, Демократическая Республика». Это подталкивает макет вправо, разбивая макет и делая горизонтальную прокрутку макета - что ужасно;)

Если я полностью удалю выделение, макет отобразится нормально. И если я удалю все варианты и поставлю короткие тесты на свои места, он также отлично работает. Поэтому я уверен, что это длинный вариант , который является проблемой. Сам выбор составляет всего 50%, поэтому он не запускается с экрана - его элементы «невидимые».

Here is a temp link: http://moymadethis.com/oca/test.html

Работает отлично на рабочем столе, проблема на iphone mobile (сафари, хром и опера).

Спасибо, надеюсь кто-то может пролить свет на решение для этого? Стив

0
nl ja de
К сожалению, мне не разрешили загрузить скриншот :( Я думал, что удалю эту строку.
добавлено автор user1406440, источник
возможно, использовать jquery. select и опции arent propperly styleable.
добавлено автор user1721135, источник
Я не вижу скриншотов (хотя я думаю, что проблема понятна из словесного описания).
добавлено автор Jukka K. Korpela, источник

3 ответы

Обычно достаточно установить ширину на самом элементе select (в отличие от установки ширины на его родительском объекте - внутренний элемент по умолчанию будет переполняться, если необходимо), например.

 select { width: 6em; }

Когда меню открыто (когда элемент сфокусирован), параметры будут отображаться в ширину, требуемую их контекстом, но это будет отображаться в «слое» поверх содержимого страницы, поэтому это не должно мешать макету.

Если проблемы остаются, напишите минимальный код HTML и CSS, чтобы воспроизвести проблему и определить тестируемые платформы и браузеры.

1
добавлено

try using max-width on select element eg #myselect {max-width:95%;}

0
добавлено

Недавно у меня была такая же проблема в проекте, над которым я работаю. Я нашел решение для использования! Важно для ширины выбора, которая в моем случае была на 100%. Это позволяет идеально работать на мобильных и настольных компьютерах.

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)