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 - Pozicování a velikost - CSS vlastnosti

Článek pro vás napsal Jan Lupčík

Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.

Aktivity

Nejčastěji vyhledáváné

resize - Český CSS 3 manuál

Hodnoty

Ukázka