| Autor | Zpráva | ||
|---|---|---|---|
| XolyCZ Profil |
Ahoj, mám asi jednoduchý dotaz. Potřebuju udělat takovou malou vysouvací lištu, která bude schovaná za krajem displeje, všechno mi funguje, ale jedna věc dělá bordel a já nevím proč. Mám tam dva prvky, jeden je ikona a druhý je odkaz v němž je napsané jméno. A když jeden nebo druhý prvek nějak od sebe odsadím, ať už pomocí marginu nebo paddingu, vždycky se to dozdělí na dva řádky. Všiml jsem si, že to dělá, když je to fixně pozicované, ale proč? Poradí mi někdo prosím? Tady je ukázka: Živá ukázka
A když už to tu mám, tak proč, když je to pozicované nějak jinak než v toku textu, pomocí "position", tak tomu nejde přidat box-shadow? Díky moc. |
||
| blaaablaaa Profil |
#2 · Zasláno: 6. 6. 2019, 13:00:42
XolyCZ:
V Chrome i Firefoxu je ikona i text na jednom řádku. |
||
| XolyCZ Profil |
#3 · Zasláno: 6. 6. 2019, 13:01:34
blaaablaaa:
Odkomentuj si u něčeho margin nebo padding a uvidíš. |
||
| blaaablaaa Profil |
#4 · Zasláno: 6. 6. 2019, 13:13:41
XolyCZ:
Ha, jsem si nevšiml a přidával padding/margin vlastní. Pokud ho dám v pevných jednotkách (třeba px), je to ok ... Tipuju, že se nejdříve spočítá šířka accountToggle, ze které se pak vypočítá x% padding/margin, který už se tam nevleze, proto se to zalomí. Ale jen má teorie bez řešení :/ (I když mi přijde zvláštní nastavovat takhle padding/margin v procentech ...) |
||
| XolyCZ Profil |
blaaablaaa:
To je možné, ale pro mně je to asi výhodnější to udělat nějak řekněme responzivní nebo spíše, aby když tam bude trochu kratší nickname nebo delší, ať se to neroztrhne znova, ať se to přizpůsobí, ikdyž ten nickname ořezávám na 10 znaků. |
||
| blaaablaaa Profil |
#6 · Zasláno: 6. 6. 2019, 13:30:47
XolyCZ:
Jak to souvisí se zalomením textu? Nastavil bych pevný padding + nějakou šířku a přesahující text zkrátil v css, např. takto: .accountToggle {
width: 100px;
padding: 3px 5px 3px 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} |
||
| Tomášeek Profil |
blaaablaaa:
Nevíš, jak dlouhý ten text bude. Orezavat ho je nesmysl. Pro dvojpismenny nick 100px šířka je také nesmysl. XolyCZ: Možnosti je více. Dej padding celému divu, ne jednotlivým elementem. Nebo div vyhod, ikonu dej přímo do odkazu. Další možnosti je dat odkazu levý padding ve velikosti ikony a ikonu do nej napozicovat. Nebo dat tu ikonu rovnou na a:before. Fakt možnosti je hafo, jen si vybrat a trochu si s tím pohrát. Nastavovat šířku je nesmysl - dlouhé nicky je blbost orezavat (na šířku i počet znaku), pro krátké nicky by tlačítko bylo zbytečně velké. |
||
| XolyCZ Profil |
blaaablaaa:
Toten typ zalomení textu mi schová celý nickname, nevím proč, když všude možně jinde tam dává pár teček. Tomášeek: o té ikoně jsem taky uvbažoval, že bych ji spojil s odkazem, ale já potřebuju, aby ta ikona čouhala zpoza toho kraje a pomocí té ikony on si mohl tu lištu vytáhnout a potom kliknout na ten svůj nick, který ho přesune na profil. Kdybych tu ikonu dal k odkazu, bude to zrovna odkazovat na profil a tím pádem bych tam ani žádný nickname nemusel mít, jenom kousek ikony zpoza okraje a to by asi nevypadalo moc dobře, já nevím. Tomášeek: Já v podstatě potřebuju akorát udělat nějaký padding tomu odkazu, ať se na něho lépe kliká a potom ho posunout od té ikony směrem doprava. A vždycky se to rozjede. Není ještě nějaká jinačí možnost? |
||
| Tomášeek Profil |
#9 · Zasláno: 6. 6. 2019, 14:03:34
XolyCZ:
To, aby ikona couhala ven, je jen otázka nějakých stylu okolo. V rámci HTML to je korektní řešení. Zkus si s tím trochu pohrát (mám k dispozici aktuálně jen tablet, tak ti přesně styly nedám). |
||
| XolyCZ Profil |
Tomášeek:
A to není ještě nějaký styl, který s tím něco udělá? Tu ikonu do toho odkazu nacpat nemůžu. Ono to dělá jenom, když je to v nějaké jiné pozici než ve statické. |
||
| Tomášeek Profil |
#11 · Zasláno: 6. 6. 2019, 14:36:54
XolyCZ:
„A to není ještě nějaký styl, který s tím něco udělá?“ Všechno se dá nějak nastylovat. „Tu ikonu do toho odkazu nacpat nemůžu.“ Ale můžeš. „Ono to dělá jenom, když je to v nějaké jiné pozici než ve statické.“ Nerozumím. Ale to nevadí. Gratuluji, „donutil“ jsi mě pustit počítač. Ukaž mi prosím obrázek, jak to má vypadat, podívám se na to. |
||
| XolyCZ Profil |
Tou pozicí jsem myslel jakože když to není position:static, což je prý defaultní, ale je to třeba fixed, relative a tak.. Já to mám v té živé ukázce, potřebuju jenom, aby to bylo na jednom řádku. Když ti tu hodím screen, tak to vypadá asi takhle zhruba: ctrlv.cz/OOae, přičemž po tu červenou čáru je to zasunuté v kraji displeje. Říkám, že všechno funguje, akorát se to rozhazuje na dva řádky někdy.
EDIT: tohle je, když je to zasunuté: ctrlv.cz/ZOKm |
||
| Tomášeek Profil |
#13 · Zasláno: 6. 6. 2019, 14:58:46
|
||
| XolyCZ Profil |
Tomášeek:
Však to je to samé ne? Jo tys to trochu upravil, ale na dvou řádcích to mám pořád. |
||
| blaaablaaa Profil |
XolyCZ:
Když dáš tu ikonu do odkazu, bude to vypadat takto: Živá ukázka , proč to nemůže být (a pořád nedokážu pochopit ty % paddingy)? //pozde |
||
| XolyCZ Profil |
#16 · Zasláno: 6. 6. 2019, 15:04:15
Protože jsem říkal, že to má tu lištu vysunout a když tam bude takhle, tak to klikne na ten odkaz, chápeš? Ta ikona slouží pouze k tomu, aby se ta lišta vytáhla nebo vrátila zpátky. Ten nickname má být potom odkaz na profil. A ty paddingy, to už je asi na tobě co používáš, mi se takhle s větším displejem zvětšuje ta plocha, ale šlo by to udělat i přes pixely třeba žejo.
|
||
| blaaablaaa Profil |
XolyCZ:
Pro větší paddingy pro různá rozlišení se v css používají media queries. Nevím, co a jak má lištu vysunout, ale není problém si klik na ikonu odchytit a tu událost vytažení navázat na tohle. |
||
| Tomášeek Profil |
#18 · Zasláno: 6. 6. 2019, 15:13:14
XolyCZ:
„Jo tys to trochu upravil, ale na dvou řádcích to mám pořád.“ Ať dělám, co dělám, tak to mám vždy na jednom řádku. Zkus si to kdyžtak trochu poštelovat, ale je to takhle správná cesta. Když teda pominu nesmyslnost tvého HTML, o kterém tě nechci přesvědčovat, že je špatně --- mám pocit, že bys mi stejně neuvěřil a bylo by to pověstné házení hrachu na zeď :-) Mimochodem, procentuální paddingy/marginy nejsou v zásadě špatně, ale počítat je dle body imho nesmysl je. Což je to, co nyní děláš. Ale je to tvůj job, asi to tak chceš. Není cesta nastavit odsazení natvrdo v pixelech, ale počítat ta procenta z něčeho stálejšího než je body.
|
||
| XolyCZ Profil |
blaaablaaa:
Já vím že jo, je otázka co jak použiješ. To vysouvání dělá script <script>
$(document).ready(function(){
$('.accountToggle').click(function(){
$('.accountToggle').toggleClass('active')
})
})
</script>
|
||
| blaaablaaa Profil |
XolyCZ:
Co nějak takto? Živá ukázka Odchytíš kliknutí na ikonku a podle toho nastavuješ .active, kliknutí na odkaz funguje normálně dále. |
||
| XolyCZ Profil |
Tomášeek:
Dívej, já to mám takhle: ctrlv.cz/JxV8 No s tím html, klidně mi to řekni, učím se to nějak sám, nemám od koho se to naučit, protože nikoho takového neznám. blaaablaaa: No tak s tou ikonou to funguje takovým způsobem taky no. Já tohle neznám, neumím psát scripty, takže proto jsem třeba říkal, že tam tu ikonu dát nemůžu.. Tak díky. A Tome ty jsi tím HTML co myslel? |
||
| XolyCZ Profil |
Tak nakonec je z toho něco takového: Živá ukázka
Akorát teda, ještě je tam jeden problém. Když se změní délka nicknamu, tak se změní i to, jak hodně je to povytáhlé :/. Když vím přesnou velikost té části, co má čouhat, nejde to zapsat do toho "right" nějak jinak? aby to právě o tu hodnotu bylo vystrčené. Aby to posunovalo jakoby obráceně, protože hodnota left se mění, tak s ní pracovat nemůžu, tak aby ten right posouval z druhé strany o nějakých 45px. |
||
| Tomášeek Profil |
#23 · Zasláno: 6. 6. 2019, 17:11:42
XolyCZ:
.accountToggle {white-space: nowrap; left: 100%; margin-left: -40px}Kde ten záporný margin je šířka toho kusu, který má koukat ven. Posouvat to pomocí right nejde, protože šířku neznáš.
|
||
| XolyCZ Profil |
Tomášeek:
A pro vysunutí dám left:auto a right:0 že?
Akorát to teď přestalo zajíždět a vyjíždět postupně, ale jenom to přeskočí buď tam nebo zpátky a nebere to ohled na transition.
|
||
| Tomášeek Profil |
#25 · Zasláno: 6. 6. 2019, 18:54:13
XolyCZ:
Samozřejmě, ze se transition neprovede, když hodnotu vynulujes na auto a druhou vytvoříš. Zapoj mozek a premyslej, jak by to šlo vyřešit jinak. Já ti všechno psát nebudu. |
||
|
Časová prodleva: 5 let
|
|||
0