Pull to refresh

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

Reading time1 min
Views2.3K
Столкнулся в очередной раз с проблемой, возникающей при попытке задать 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; }

Tags:
Hubs:
Total votes 16: ↑10 and ↓6+4
Comments9

Articles