Управляем ресайзом textarea
Четверг, 07 Апр 2011 1:49С тех пор, как вышел Firefox 4, который обновился настолько, что даже святая-святых js-двиг браузера был изменен на GreaseMonkey (и слава Богу!), остро встала проблема ресайза полей ввода текста (тег <textarea>). Где-то поля могли ресайзиться вполне сносно, а в каких-то дизайнах эта фишка не катила аж никак. Ну, вот хотя бы в моем:
Ресайз textarea на движке GreaseMonkey
Мало того, что ресайз по ширине уродует форму комментирования, так в некоторых статьях поле ввода текста может еще и подныривать под сайдбар. Конечно же все эти проблемы решаются простым css (к примеру, запретить ресайз всей формы при ресайзе поля ввода текста можно строго прописав ширину родительскому элементу textarea в «px», но в общем случае все же куда более удачным кажется решение запретить ресайз textarea по ширине, оставив только вертикальный. И здесь на помощь приходит очень простое свойство css3 resize:
Синтаксис:
resize: none | both | horizontal | vertical | inherit
Значения:
- none — размеры элемента не изменяются;
- both — можно изменять размеры элемента по горизонтали и вертикали;
- horizontal — можно изменять размеры элемента только по горизонтали;
- vertical — можно изменять размеры элемента только по вертикали;
- inherit — наследует значение родителя. Правда, не особо ясно, какого родителя, т.к. свойство применимо исключительно к текстовому полю, а одно текстовое поле не может находиться внутри другого, то есть родителя с таким свойством у него не может быть по определению.
Таким образом textarea {rezise: vertical;} легко исправляет ситуацию с ресайзами.
Поддерживается это свойство браузерами с js-двигом GreaseMonkey, а точнее Chrome 3+, Safari 4+, Firefox 4+. Опере и IE оно и не надо, т.к. их js-двиги таких финтов с текстовыми полями делать не умеют.
Я на своих сайтах ресайз textarea уже поправил, чего и вам желаю.
Успехов!
Ваш Перспективный блоггер