Как стать автором
Обновить

Лечим 100%-широкий textarea, попавший под padding в IE (на Хабре тоже)

Время на прочтение1 мин
Количество просмотров2.4K
Столкнулся в очередной раз с проблемой, возникающей при попытке задать 100%-ю ширину элементу, расположенному в блоках, которые имеют ненулевые padding-и или margin-ы. В случае с textarea получается следующее: при первом отображении ширина устанавливается такая, как было задумано, ничего нигде не вылазит, но стоит только что-то набрать — поле расширяется за пределы блока, в который оно вставлено (только ИЕ).

В этот раз искать обходные пути, не содержащие отступов и хаки (типа "// width: 90%"), не собирался, — дерево комментариев — не место для извращений. Перепробовал разные варианты, но моё поле ввода всё-равно частично пряталось под границами родительского элемента (либо вылазило поверх него).

Вспомнил про Хабр, полез в код, а там форма засунута в . Хм, думаю, а чего у меня это не работало? Открываю Хабр в ИЕ6 — так и тут не работает:



В результате проб и ошибок пришёл к такому решению:

#comment_form .textarea { position: relative; height: 64px; margin-bottom: 8px; }
#comment_form .textarea textarea { position: absolute; width: 100%; height: 64px; }

Теги:
Хабы:
Всего голосов 16: ↑10 и ↓6+4
Комментарии9

Публикации

Истории

Ближайшие события

27 августа – 7 октября
Премия digital-кейсов «Проксима»
МоскваОнлайн
28 – 29 сентября
Конференция E-CODE
МоскваОнлайн
28 сентября – 5 октября
О! Хакатон
Онлайн
30 сентября – 1 октября
Конференция фронтенд-разработчиков FrontendConf 2024
МоскваОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн
7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн