Как правильно задать ширину формы и её селектов?

[borus]

Здравствуйте!

На странице на ширине монитора в 320px, если кликнуть кнопку "Заказ в 1 клик" возникает форма, ширина элементов которой начиная с элемента div#contactForm_oneclick больше, чем ширина базовой обёртки div#aux.

Пробовал назначить div#contactForm_oneclick ширину inherit, чтобы наследовать ширину родительской обёртки, но это не помогло, наверно из-за широких селектов.

Скажите пожалуйста, как правильно прописывать стили в такой ситуации так, чтобы форма укладывалась в любую текущую ширину экрана? Отдельно селекты ограничивать?

 

[VeniVidiVici]

Здесь дело не в модальном, а в содержимом, надписям и формам заданы фиксированные значения, из вариантов - через медиа пошаманить над содержимым, к примеру добавить li элементам вот такое:

#contactForm_oneclick ul li {
    display: flex;
    flex-direction: column;
    max-width: 270px;
}

 

Edited June 3, 2017 by VeniVidiVici

[Svetlana_P]

Я бы прописала для селекта через медиа запрос  width: 100% вместо max-width: 100% для малой ширины окна. И все, форма нормальная становится.

Другое дело, в раскрывающемся списке сами пункты полностью не помещаются на экран. Но, насколько я понимаю, тут без JS ничего не поделаешь.

PS не претендую на самое правильное решение

Edited June 4, 2017 by Svetlana_P

[Schamil74]

Это да:) Без JS ширину option не задать

[borus]

В 04.06.2017 в 13:49, Svetlana_P сказал:

Но, насколько я понимаю, тут без JS ничего не поделаешь.

Спасибо!

А почему без js не обойтись? 

[Schamil74]

Не парься по этому поводу.

Вот пользуйся:

Вариант 1

Вариант 2

Статья - полезно!

[Svetlana_P]

Ну вот не поддается стилизации option, и всё. Та же история с радио-кнопками и чекбоксами. Не знаю, надо спросить разработчиков браузеров, почему так.
Поэтому либо плагин нужно использовать для стилизации подобных элементов форм, либо имитировать их другой разметкой, забив на "родную" и более правильную семантически.

Но я сложные формы не верстала года два. Может, за это время что-то изменилось.

[borus]

38 минут назад, Schamil74 сказал:

Вариант 1

Вариант 2

Спасибо! Я посмотрел код примеров, там похоже производится реальное укорочение передаваемых значений формы. Получается, может так случиться, что текст опций сократится так, что нельзя будет понять, какая именно опция была выбрана?

Например, если было две опции вида:

long long long long long long long long long long long long text 1

long long long long long long long long long long long long text 2

на выходе скажем будет  long long long long ...

и уже не понятно какая опция была конкретно выбрана. Если так, то есть ли другие решения?

[Schamil74]

Попробуй поколдуй с этим http://javascript.ru/String/substr

Вряд ли поможет, конечно)))

 

В твоем случае, как я тебя понял, нужен перенос строки в option, но это невозможно. 

Решение: эмулировать select.

Удачи! 

Edited June 7, 2017 by Schamil74

[andrey7287]

А зачем присутствует фраза Оплата с помощью ? Сократите не нежные фразы и все будет пучком !

 

[Schamil74]

andrey7287, хорошо советует.

В "доставке" тоже можно попробовать сократить длину строки, переформулировать название