| Autor | Zpráva | ||
|---|---|---|---|
| Kcko Profil |
#1 · Zasláno: 18. 5. 2021, 16:38:01
Dlouhodobě řeším obecný problém.
Mám rodiče (v něm cokoliv), potřebuji ho překrýt dítětem (vrstvou), a potřebuji aby v případě, že obsah v dítěti bude vyšší než rodič, aby se mi rodič roztahoval. Vždy jsem to řešil absolutním pozicováním; což je tak nějak standard a dává to smysl, ale samozřejmě mi to rodiče neroztáhne. Beru jakékoliv smysluplné řešení, napadá Vás něco? jsbin.com/gopatejuhi/edit?html,css,output |
||
| anonym_ Profil * |
#2 · Zasláno: 18. 5. 2021, 16:46:21
Kcko:
Důvod, proč není ten overlay součástí .row je přesně jaký? Nějak nechápu ten reálný use-case, který potrebujes řešit. |
||
| Kcko Profil |
#3 · Zasláno: 18. 5. 2021, 16:50:45
anonym:
Důvodů může být víc. 1) Řádek z eshopu (LOGO dopravce, cena ...) pokud nejde nakoupit překryje to alert overlay s opacitou, aby ten řádek šel pořád trošku vidět co v něm je ... 2) Vizuální banner (podkladový obrázek, nadpis, nějaký text, buttonek), klik na buttonek, překryje se to overlay-em s kontaktním formulářem (BP a je pak těžké ten formulář v tom omezeném prostoru udržet) Tech use-casů je víc, někdy si klient / grafik vymyslí ptákovinu. Hledám řešení. |
||
| Trim Profil |
#4 · Zasláno: 18. 5. 2021, 17:03:06
Tak jako nemusíš tam mít to pozicování vůbec, ne? :D
|
||
| Kcko Profil |
#5 · Zasláno: 18. 5. 2021, 17:09:56
Trim:
Navrhni řešení, které splňuje to co potřebuji, klidně uprav živou ukázku. |
||
| anonym_ Profil * |
Kcko:
To chápu, popsal jsi klasicky overlay s popupem, zejména v tom bodě s bannerem. Ale pořad tam nevidím ten use-case, kdy potrebujes roztahnout i ten prvek samotný. Možná kdybys měl nějakou reálnou ukázku toho, co potrebujes dosáhnout, byl bych schopny poradit. Zatím to ale neumím uchopit (možná si jen nerozumíme). Jestli budeš schopny ukázat (klidně anonymizovanou - bez reálných textu) reálnou ukázku stavu normálního a s tím otevřeným elementem, něco půjde vymyslet. |
||
| Kcko Profil |
anonym:
Ahoj, předně díky za zájem. Nepotřebuji tu probírat use-case. Zajímá mě to co jsem popsal a nějaké řešení. Je smutné, že to nedokážu po 15 letech v oboru vymyslet, ale myslím, že to bez JS nepůjde (jednoduchý JS, který natahuje výšku rodiče dle dítěte). Požadavky znovu: - Vrstva dítěte musí překrýt rodiče - Vrstva dítěte může být vyšší než rodič, rodič na to tedy musí reagovat. - Výška dítěte není předem známá - Nelze vypnout rodiče ani nastavovat nějaké fixní min-height apod. - Absolutně bez JS - Řešení jakékoliv, které dává smysl (Flex, Grid ...) Nenapadá mě nic :-) PS. Na této ukázce je to myslím patrné jsbin.com/gopatejuhi/edit?html,css,output (dítě vytéká z rodiče, to nesmí, rodič se musí natáhnout, jinak chci chování tak jak je to vidět vizuálně). |
||
| anonym_ Profil * |
Kcko:
„Nepotřebuji tu probírat use-case.“ V tom případě neumím bohužel poradit, protože si nedokážu představit situaci, co vlastně potřebuješ (a tedy ani postup, jakým toho docílit). Z požadavků, které píšeš, nevidím jediný důvod, proč není .overlay součástí .row a proč tam je ta absolutní pozice. A ne, pokud je potomek pozicovaný absolutně, rodiče ovlivnit neumí (protože to je klíčová vlastnost toho pozicování). To jsem ale psal už v #2.
Bez konkrétního zadání to opravdu buď nechápu, nebo to neumím uchopit. V každém případě nejsem schopný ti pomoci. Otázka je, jestli reálně potřebuješ toho rodiče roztáhnout (pak tam nemůže být position: absolute).
Pokud ti stačí jen ten overlay, pak vyhoď right a bottom a přidej šířku.
.row {
border: 1px solid gray;
padding: 2rem;
background: #f3f3f3;
position: relative;
z-index: 1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: rgba(0,0,0,.5);
/*right: 0;
bottom: 0;*/
border: 1px solid blue;
z-index: 2;
}Bavíme se tady o nějakém hypotetickém příkladu, přičemž v reálu toho rodiče natáhnout reálně třeba vůbec nepotřebuješ. |
||
| Kcko Profil |
anonym:
To co jsi navrhl je přeci špatně, napozicovaná vrstva sic přeteče, ale překryje pak i elementy, které budou pod "rodičem". Nic hypotetického to není, opakuje se to na webech docela často. Blok na stránce s nefixní výškou, který může být dvoustavový (ten 2 stav je právě ten při nějaké interakci, kdy se přes něj překryje jiná vrstva s jiným contentem). Snad nemluvím mongolsky, nevím jak jinak to vysvětlit. Jinak vysvětlovat mi základy css (pozicování apod) fakt nemusíš ;-), jen jsem tou ukázkou chtěl ukázat čeho chci docílit, a na tomto příkladu je to nejvíce patrné. |
||
| anonym_ Profil * |
#10 · Zasláno: 18. 5. 2021, 20:57:36
Kcko:
Tak v tom případě jsem psal, ze tam ta pozice být nesmí. Píšeš, ze základy css mas (a nechci to rozporovat, nemám důvod nevěřit), ale současné chceš, aby absolutně pozicovany prvek roztahl rodiče. To je neřešitelný požadavek. Pokud to, co se snažíš popsat, řeší spousta webu, proč se nepodivas tam, jak je to řešené? Já už potřetí píšu, jak to chápu a pokud to myslíš jinak, tak jeden z nás je Tatar (a třeba jsem to já :-)) |
||
| Kcko Profil |
#11 · Zasláno: 18. 5. 2021, 21:04:41
anonym:
Tak v tom případě jsem psal, ze tam ta pozice být nesmí. Píšeš, ze základy css mas (a nechci to rozporovat, nemám důvod nevěřit), ale současné chceš, aby absolutně pozicovany prvek roztahl rodiče. To je neřešitelný požadavek. Ano, ale neřekl jsem snad, že to musí být napozicované ne? Jedině touto demonstrací jsem chtěl ukázat jak to má vypadat. Proto jsem psal, že mi je jedno jak to bude udělané, ale nenapadá mě ani žádná magie GRID / FLEX, jak toho docílit. Nenašel jsem jak to někdo řeší, ani se mi nepodařilo nic vygooglit. Asi to nechme být, protože to jen CSSkem řešit nejde, moje řešení je OK, akorát se holt dopíše JS vrstva, která tu výšku bude natahovat. Jednoduché Jquery nebo ještě jednodušší VueJS direktiva ;) Ale chtěl jsem to vyřešit jen CSSkem = Nelze prostě. Každopádně díky za snahu :] |
||
| Keeehi Profil |
Tak obyčejné prohazování dvou obsahů by nemělo být nic těžkého.
Pokud to má prosvítat, tak to stále jde, pokud ten nový obsah není menší než ten původní. No a když se použije grid, tak je jedno jak je co dlouhé a funguje to ve všech případech. Mimochodem, https://stackoverflow.com/a/58360992 mě přivedlo na tuto možnost. |
||
| Kcko Profil |
#13 · Zasláno: 19. 5. 2021, 11:43:31
Keeehi:
Ahoj, díky za zájem. 1. řešení není vhodné viz Živá ukázka (výška nesmí být nikdy menší než rodič) 2. Sám sis odpověděl (může se stát cokoliv, hledám univerzální řešení) 3. Tohle vypadá zajímavě, zdá se, že to je to co chci, prostuduji později detailně - DÍKY! |
||
| Kcko Profil |
#14 · Zasláno: 19. 5. 2021, 13:34:44
Keeehi:
Dostudováno, je to řešení, co jsem hledal, moc díky :) |
||
| Keeehi Profil |
#15 · Zasláno: 19. 5. 2021, 16:33:30
Kcko:
Vím že pro tebe ta první a druhá možnost nejsou. Jsou ale nejjednodušší tak jsem s nimi začal. Kdyby sem někdo přišel a stačila mu ta jednodušší varianta. |
||
|
Časová prodleva: 3 roky
|
|||
0