Управляем ресайзом textarea

Четверг, 07 Апр 2011 1:49

С тех пор, как вышел Firefox 4, который обновился настолько, что даже святая-святых js-двиг браузера был изменен на GreaseMonkey (и слава Богу!), остро встала проблема ресайза полей ввода текста (тег <textarea>). Где-то поля могли ресайзиться вполне сносно, а в каких-то дизайнах эта фишка не катила аж никак. Ну, вот хотя бы в моем:

Ресайз textarea на движке GreaseMonkey

Ресайз 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 уже поправил, чего и вам желаю.

Успехов!
Ваш Перспективный блоггер

http://blogto4ka.ru

RSS комментариев

Оставьте свой комментарий о материале
(Комментарии со ссылками попадают на модерацию. Остальные не попадают, но я могу удалять те, которые посчитаю бесполезными, не несущими смысловой нагрузки)