Przejdź do treści

Rozmiary - CSS

Przeciąganie {resize}

W jaki sposób zablokować możliwość zmiany rozmiaru (przeciągania) obszaru tekstowego w formularzu?

CSS 3 - Chrome Firefox Edge Opera Safari

selektor { resize: sposób }
Selektorem może być dowolny znacznik z ustawionym przepełnieniem innym niż "visible" [zobacz: Wstawianie stylów].

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 }

Przykład {resize}

"resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"... "resize: both; overflow: hidden"





Komentarze

Zobacz więcej komentarzy

Facebook