Rozmiary - CSS
Przeciąganie {resize}
W jaki sposób zablokować możliwość zmiany rozmiaru (przeciągania) obszaru tekstowego w formularzu?
CSS 3 -
selektor { resize: sposób }
Jako "sposób" należy podać:
- both - użytkownik może zmienić rozmiar elementu poprzez przeciągnięcie myszką prawego-dolnego narożnika pola
- vertical - możliwa zmiana tylko wysokości
- horizontal - możliwa zmiana tylko szerokości
- none - użytkownik nie może zmienić rozmiaru elementu
Zdarza się, że treść elementu nie mieści się w ustalonych dla niego wymiarach. Może to spowodować zaburzenie estetyki strony - np. kolumna menu może w takiej sytuacji opaść na dół (pod treść). Można się przed tym zabezpieczyć blokując przepełnienie elementu ("overflow: hidden
"). Co jednak, jeśli czytelnik mimo wszystko będzie chciał zobaczyć przyciętą treść? Można mu to umożliwić, poprzez udostępnienie specjalnego uchwytu do przeciągania narożnika elementu (zwykle prawego-dolnego), aby mógł go swobodnie powiększyć i odczytać ukrytą treść.
Taki przeciągany narożnik jest domyślnie dostępny w przeglądarce Safari i Chrome dla wszystkich obszarów tekstowych formularzy. W pewnych sytuacjach twórca strony może jednak nie chcieć, aby użytkownik rozciągał w ten sposób pola formularza, gdyż może to wywołać niekontrolowane zmiany wyglądu całego formularza. W takiej sytuacji przydatny może być styl:
textarea { resize: none }
Nie zaleca się jednak blokowania w każdej sytuacji możliwości zmiany rozmiaru obszaru tekstowego, ponieważ może to skutecznie uprzykrzyć życie użytkownikom. O ile czasami zmiana szerokości pola może zaburzyć układ strony, to wpływanie przez użytkownika na wysokość raczej nie powinno spowodować żadnych błędów. Zatem najczęściej lepszym rozwiązaniem będzie:
textarea { resize: vertical }