resize - Český CSS 3 manuál

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

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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

 

 

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
Aktivity (1)

 

 

Komentáře

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

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:29.7.2015 13:44

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
Usmívej se, zítra už tvůj kód nemusí fungovat!
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na IT Man
Matúš Petrofčík:29.7.2015 18:41

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:29.7.2015 18:44

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
Usmívej se, zítra už tvůj kód nemusí fungovat!
Avatar
Odpovídá na Matúš Petrofčík
Michal Žůrek (misaz):29.7.2015 19:00

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:29.7.2015 19:02

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:29.7.2015 19:05

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
Usmívej se, zítra už tvůj kód nemusí fungovat!
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.