21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
juriad
Profil
Mám dva elementy, vnější, který má pevnou šířku a povolený rozsah výšek. Vnitřní má libovolné rozměry, které se mění javascriptem (jedná se o komponentu na vykreslení grafů).

Cílem je, aby vnější element byl vertikálně trochu natahovací, ale při přetečení se mu objevily posuvníky. Dokud je vnitřní element menší, má být centrovaný v obou směrech.

Ukázka s flexem, pokus bez flexu
Podpora je nutná od IE11, ale IE10 by byla také příjemná. V IE11 stačí přidat display: flex k .container.
Existuje řešení bez flexu a JS?

A koukám, že u flexu se nezobrazuje posuvník při horizontálním přetečení (šířka vnitřního elementu větší než vnějšího), takže jednoduché použití flexu také není řešení.

Opravena ukázka s flexem, zapomněl jsem ji uložit.
tiso
Profil
juriad: „které se mění javascriptem“ vs. „bez flexu a JS
To sa trošku vylučuje, nie?
Stačí cez JS nastaviť horný margin vnútornému elementu na polovicu rozdielu výšok elementov.
juriad
Profil
Jo, nasavení pomocí JS by šlo, ale raději bych se tomu vyhnul, abych měl samotnou komponentu maximálně nezávislou na prostředí, ve kterém se bude zobrazovat. Je dost možné, že se vnitřní element bude jindy zobrazovat v jiném kontextu, kde toto chování nebude žádoucí. Proto jsem to chtěl řešit pomocí CSS, které je takové deklarativní.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0