resize - Český CSS 3 manuál

HTML a CSS Manuál Pozicování a velikost resize - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti resize můžeme uživateli dovolit roztahovat element. Ve výchozím nastavení se může např. textarea (vstupní formulář pro zadání více řádkového textu) libovolně roztahovat. Tento atribut nepodporuje webový prohlížeč IE! Vlastnost se dědí.

Hodnoty

  • none (výchozí) - Uživatel nemůže změnit velikost elementu.
  • both - Uživatel může element roztáhnout horizontálně i vertikálně.
  • horizontal - Element se může roztáhnout pouze horizontálně.
  • vertical - Element se může roztáhnout pouze vertikálně.
  • initial - Nastaví vlastnost na výchozí hodnotu (tedy na none).
  • inherit - Hodnota se zdědí z rodičovského elementu.

Poznámka: pro využití vlastnosti resize musíme nastavit atribut overflow na jinou hodnotu, než je hodnota visible.

Ukázka

Vytvořme si div o rozměrech 300px × 100px s modrým, plným rámečkem o šírce 1px, který bude moci uživatel roztáhnout pouze vertikálně. Vlastnosti overflow nastavíme hodnotu auto.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                div
                {
                        width: 300px;
                        height: 100px;
                        border: 1px solid blue;
                        resize: vertical;
                        overflow: auto;
                }
                </style>
                <title>resize</title>
        </head>
        <body>
                <div>Tento div může změnit velikost pouze vertikálně.</div>
        </body>
</html>

Výsledek:

Vlastnost resize v CSS 3

 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Pozicování a velikost - CSS vlastnosti

 

 

Komentáře

Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Matúš Petrofčík:

Poznámka: pro využití vlastnosti resize musíme nastavit atribut overflow na jinou hodnotu, než je hodnota visible.

Neviem o tom že by som musel nastavovať inú hodnotu overflow.
Príklad: na http://www.fvojtas.com/contact mám kontaktný formulár, ktorý má CSS aplikované na textareu bez akéhokoľvek overflowu:

form>textarea {
resize: vertical;
min-height: 100px;
max-height: 300px;
}
Odpovědět 29.7.2015 13:39
obsah kocky = r^2 ... a preto vlak drnká
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Matúš Petrofčík
IT Man:

To funguje jen u textarey. Tam se vůbec dávat nemusí. Ale nevím jistě, zda už textarea nemá ve výchozím nastavení hodnotu auto u vlastnosti overflow.

Odpovědět 29.7.2015 13:44
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na IT Man
Matúš Petrofčík:

je to možné :)

btw vieš mi dať nejaký príklad kde by sa mi hodilo menenie veľkosti u iného elementu než textarea? :D

Odpovědět 29.7.2015 18:41
obsah kocky = r^2 ... a preto vlak drnká
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Matúš Petrofčík
IT Man:

Vždy se může nějaký objevit. Z hlavy ti to opravdu neřeknu. Pokud ale budeš chtít mít nějaký dlouhý text např. v divu, můžeš udělat malý div, nastavit text-overflow na hodnotu ellipsis a k tomu nastavit vlastnost resize na hodnotu vertical. :)

Odpovědět 29.7.2015 18:44
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Odpovídá na Matúš Petrofčík
Michal Žůrek (misaz):

div by myslím měl jít. To by celkem i stačilo, když jde měnit velikost divu, tak jde měnit všechno.

Odpovědět 29.7.2015 19:00
Nesnáším {}, proto se jim vyhýbám.
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na IT Man
Matúš Petrofčík:

Zaujímavý nápad. Celkom rýchlo napreduješ :D

Odpovědět 29.7.2015 19:02
obsah kocky = r^2 ... a preto vlak drnká
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Matúš Petrofčík
IT Man:

Díky. A pro úplnost by se tam dalo nastavit max-height k těm divům, aby si to někdo neroztahoval až do aleluja. :)

Odpovědět 29.7.2015 19:05
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.