TransWikia.com

Изменение размера input в соответствии с размером в формы flexbox

Stack Overflow на русском Asked by network_cookie on November 7, 2021

При уменьшении размера поле input выходит за края формы:

.form-container { width: 230px; }

Можно ли как-то динамически уменьшить поле input, чтобы не не нарушить форматирование, и сохранить выравнивание чтобы оно осталось в форме?

Рабочий вариант

Проблемный вариант

One Answer

Поскольку у Вас input помещен внутрь тега label, то реализация концепции responsive относительно исходного макета будет неполноценной.

Можно задать максимальные размеры для каждого input'a:

input {
  max-width: 60%;
}

что позволит сохранить форматирование и динамически реагировать на изменение размеров.

Имейте ввиду что Вам нужно будет настроить размеры input'ов селективно, так как их условия не равны.

Что бы получить полный контроль над позиционированием Вы можете разнести label и input и используйте для их выравнивания систему CSS Grid.

Answered by Vasily on November 7, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP