Moderní tvorba webových aplikací

O webu

CSS resize

Možnost roztahovat element pomocí CSS vlastnosti resize.

4 minuty

V Opeře 12 funguje resize nejspíš jen u značek <textarea> a <input>; v Opeře 17 založené na Webkitu už resize funguje všude. Ve Firefoxu a Chrome také není problém. IE (včetně IE 11) se zatím vůbec nechytá.

Co umí? Umožňuje bez JavaScriptu uživateli měnit rozměry libovolného elementu (třeba <div>u).

Tento element je možné ve Firefoxu, Chromu a Webkit Opeře roztahovat.

CSS změna rozměrů bude fungovat jen při nastaveném overflow na libovolnou hodnotu (auto, scroll), pochopitelně kromě výchozího overflow: visible.

Stanovit maximální a minimální rozměry roztahování jde vlastnostmi min-width a max-width / min-height a max-height. Samotné height nebo width platí zároveň jako minimální možný rozměr.

Zápis

Zápis vlastnosti resize je dost jednoduchý.

element {
  resize: both;
}

Může nabývat čtyřech hodnot:

  • both — roztahování do obou stran,
  • horizontal — roztahování do strany,
  • vertical — roztahování do výšky,
  • none — zruší možnost změn rozměrů (má smysl třeba pro <textarea>, kde bývá výchozí resize: both).

Tento element je možné ve Firefoxu, Chromu a Webkit Opeře roztahovat jen vodorovně.

 ↔ 

Tento element je možné ve Firefoxu, Chromu a Webkit Opeře roztahovat jen svisle.

 ↕ 

Roztahování formulářových prvků

Doplnění od Kolesovy plavkyně:

Textový <input> jde v Opeře roztahovat jen vodorovně i při nastavení resize: both, v Chrome nejde roztáhnout vůbec, přestože se symbol pro roztažení ukazuje.

Resize kursor (cursor)

Kursor do resizovací podoby je možné změnit následovně:

element {
  cursor: se-resize; /* both */
  cursor: e-resize; /* vodorovně */
  cursor: n-resize; /* svisle */
}

Související články

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025