b4rtaz.blog

Subskrybuj kanał RSS

Textarea i blokowanie zmiany rozmiaru pola

Komentarze: 9

Nowy Firefox 4 oferuje domyślnie* podobne udogodnienie co wcześniej oferował Google Chrome czy Opera, czyli domyślnie włączona możliwość zmiany rozmiaru pola <textarea> - w przypadku gdy designer popuścił wodzę fantazji i dał za mało miejsca do wprowadzania tekstu. Jako, że parę osób już mnie pytało jak to okiełznać najrozsądniej będzie jak umieszczę opis tutaj.

Chociaż wyżej wymieniona funkcjonalność jest całkiem przydatna, to niekiedy szablon potrafi się ładnie wysypać jeżeli użytkownik zbytnio poszaleje ze zmianą rozmiaru pola. Aby na to nie pozwolić, CSS3 daje nam nam nowy atrybut resize do którego możemy zastosować 5 wartości.

resize: none;         // zmiana rozmiaru zablokowana.
resize: horizontal;   // tylko w osi x.
resize: vertical;     // tylko w osi y.
resize: both;         // oś x i y.
resize: inherit;      // dziedziczenie, domyślne.

Więc aby zablokować zmianę rozmiaru pola <textarea> wystarczy taki kod CSS:

textarea {resize: none;}

Dodam jeszcze, że atrybut resize możemy śmiało stosować w innych tagach niż tylko wyżej wspomniany. Dla niedowiarków dorzucam mały przykład jak to działa za życia.

* wcześniej był na to stosowny plugin.

Komentarze

  1. riddle, #

    Przy odpowiednim CSS elementów nadrzędnych, można też określić max-width na 100% co pozwoli poszerzyć pole ale nie wyjechać poza kolumnę. Co przydałoby Ci się tutaj. :P (A najprościej max-width: [piksele] !important)

  2. b4rtaz, #

    Ogólnie ilość nieszczęścia jaką w życiu doświadczyłem z <textarea>, width 100% i jakimkolwiek atrybutem padding dla owego tagu nie jestem wstanie zliczyć. Zwykłem już dawać w pikselach szerokość pola i do czasu resize byłem szczęśliwy. No ale już sposób na to jest: resize: vertical;. :P

    * był błąd, był edit.

  3. riddle, #

    Zwykle robię tak:

    textarea {
  width: 100%;
  padding: 2px 5px;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
  4. b4rtaz, #

    Jeżeli skrobiemy pod nowe browsery to jest ok, ale IE'ki niestety tego nie lubią. A czasami na expression czy JS czasu nie ma.

  5. riddle, #

    Kaman, kto by się przejmował IE na własnym blogu? A box-sizing już działa w IE8, więc tylko 11% gości zobaczy textarea lekko większy niż na to layout pozwala – bo pamiętaj, że IE7 nie zepchnie go do nast wiersza, jak to robiło IE6.

  6. mina86, #

    A kysz! Jak chcę zmienić rozmiar, to jakim prawem mi tego zabraniasz? Na szczęście do zmiany rozmiaru mam UserJS, który jeszcze mnie nie zawiódł.

  7. pecet, #

    mina86 +1
    ja mam rozszerzenie do firefoksa resizable textarea i też działa bez problemowo

  8. b4rtaz, #

    @mina86: nie chodzi tylko o blokowanie, ale jak pisałem we wpisie o okiełznanie tej funkcjonalności tak aby się strona nie rozsypywała. Wcześniej na profesjonalnych stronach gdzie-nie-gdzie tą funkcjonalność uzupełniało się JavaScriptem, i koder miał pełną funkcjonalność co się stanie gdy user rozszerzy pole. Teraz gdy ta funkcja jest automatycznie dostępna rożnie bywa, dlatego mamy na to atrybut resize.

  9. Livio, #

    Za resize:no chętnie bym zabił. Pola tekstowe to jedna z tych rzeczy, których rozmiar nie powinien być stały w żadnym wypadku...

Dodaj komentarz