| Autor | Zpráva | ||
|---|---|---|---|
| Xperia Profil |
#1 · Zasláno: 29. 4. 2013, 14:45:23
Ahoj,
nemáte někdo fintu na padding, aby neroztahoval prvek? Mám formulář nastaven na 100% šířku, mám v něm input-text nastaven na 100% šířku vč. padding: 5px; problém je, že mi to o 10px roztáhne šířku elementu a input je přes okraj. 
Díkes chlapi :) |
||
| Stalker Profil |
#2 · Zasláno: 29. 4. 2013, 15:21:15
Padding se vždy přičítá k rozměrům daného elementu. Já bych to vyřešil tak, že bych šířku nenastavoval v % ale v px a odečetl od toho hodnotu paddingu. Jak je to s kombinováním hodnoty % a px nevím.
|
||
| Kaminko Profil |
#3 · Zasláno: 29. 4. 2013, 15:36:24
Alebo sa dá ešte použiť padding-top a padding-bottom ;)
|
||
| Camo Profil |
#4 · Zasláno: 29. 4. 2013, 15:40:06
Xperia:
Malo by to vyriešiť display:block na tie inputy, bez udania šírky(len padding).
|
||
| Xperia Profil |
#5 · Zasláno: 29. 4. 2013, 15:45:15
Díky za tipy, večer je zkusím :)
|
||
| Stalker Profil |
#6 · Zasláno: 29. 4. 2013, 15:48:10
Kaminko:
To se použít dá, k čemu mu to ale tad bude? Camo: Hmm zajímavá myšlenka :-) To mě ani nenapadlo. Pokud funguje, tak super |
||
| margin Profil * |
#7 · Zasláno: 29. 4. 2013, 16:06:51
Pokud jsou rozměry pevné, tak spočítat rozměry v px, jak radí Stalker.
Pokud šířka musí být 100%, tak klasické řešení je matrjoška. Další možnost je přepnout boxmodel, ale ve starších IE se to musí udělat shozením prohlížeče do quirk režimu. |
||
| Camo Profil |
#8 · Zasláno: 29. 4. 2013, 16:32:47
Stalker:
No jo, inputy to nežerú..., takže fakt len tá matrioška... |
||
| Stalker Profil |
margin, Camo:
Asi trapný dotaz, ale co znamená matrjoška? :-)) |
||
| Plaváček Profil |
#10 · Zasláno: 29. 4. 2013, 16:42:02
Stalker:
Viz http://www.pixy.cz/pixylophone/2003_08_archiv.html#1061885333. Připomínám ale, že tento článek už ztratil na aktuálnosti. Mnohem lepší je všechny prohlížeče honit ve standardním módu. Ostatně, v tomto případě matrjošku ani nelze použít. |
||
| Stalker Profil |
#11 · Zasláno: 29. 4. 2013, 16:51:44
Plaváček:
O tom slyším prvně. Díky moc. |
||
| Plaváček Profil |
#12 · Zasláno: 29. 4. 2013, 16:53:50
Stalker:
Tak na to zase zapomeň, dnes už podobné obezličky až na vzácné výjimky nejsou potřeba. :) |
||
| Camo Profil |
Plaváček:
No nebude to klasická matrioška, ale ten input bude proste z toho obalovacieho divu pretekať a ten div bude mať taký margin, ako má ten input padding(však vieme...). Plus ten input bude mať position:relative; left:-10px teda: <div style="margin:10px; overflow:overflow; border:1px solid green"> <input style="display:block; width:100%; padding:10px; position:relative; left:-10px"> </div> |
||
| Stalker Profil |
#14 · Zasláno: 29. 4. 2013, 17:04:23
Plaváček:
aha :) Ještě jsem si to ani nezačal číst :)) I tak díky |
||
| Chamurappi Profil |
#15 · Zasláno: 29. 4. 2013, 17:04:28
Reaguji na Plaváčka:
„v tomto případě matrjošku ani nelze použít“ Proč ne? „dnes už podobné obezličky až na vzácné výjimky nejsou potřeba“ A tou vzácnou výjimkou je třeba <input>. Zruší mu border, zruší mu padding, nastaví stoprocentní šířku a dá nový padding a nový border blokovému obalu. To mi zní dost matrjoškově… a nenapadá mě jiný pohodlný způsob, jak dosáhnout žádaného efektu.
|
||
| margin Profil * |
#16 · Zasláno: 29. 4. 2013, 19:39:51
http://jsfiddle.net/AQ7qG/1/ modré orámování je jen pro ukázku, aby bylo vidět obalový div.
Koukám, že řešení [#13] Camo je skoro stejné, jen mi přijde zbytečné šoupnout input o 10px doprava a zpět. |
||
| Xperia Profil |
#17 · Zasláno: 29. 4. 2013, 21:31:40
Ahoj, tak display:block; nefunguje, to je škoda :) Ono mi jde hlavně o kompabilitu, v práci to na MSIE vypadá úplně jinak, než doma na Chromu/FF :) Ještě funguje ta pevná šířka ale mám pocit že mi dělala problémy v práci, uvidím a nastavím :) Díkes :)
|
||
| Kcko Profil |
#18 · Zasláno: 29. 4. 2013, 23:36:25
Stalker:
Použij box-sizing , umí to IE 8+ (při použití <!Doctype HTML), IE 7 už by tě snad v dnešní době zajímat nemusel a nevymýšlej tady nějaké šílené hacky... :-) |
||
| margin Profil * |
#19 · Zasláno: 30. 4. 2013, 00:06:09
Xperia:
„Ještě funguje ta pevná šířka ale mám pocit že mi dělala problémy v práci, uvidím a nastavím“ Pokud je šířka pevná, tak skoro není co řešit, pokud by se vyskytl problém (o čemž pochybuji), se kterým si neporadíš, dej odkaz na živou ukázku. Kcko: „nevymýšlej tady nějaké šílené hacky“ Jeden DIV s jednou CSS deklarací bych nenazýval "šíleným hackem", přičemž je dodela možné, že ani tento "šílený hack" nebude třeba a bude stačit zadat odpovídající šířku v pixelech, namísto v procentech. |
||
| Kcko Profil |
margin:
Proč to dělat jednodušše když to lze udělat složitě že? Pak se mu změní obalový div a on bude upravovat na dvou místech? Přijde mi to celé nějaké zbytečné toto počínání, moje řešení je funkční, člověk u toho nemusí zbytečně přemýšlet ... Samozřejmě, že jeden obalový div není žádný šílený hack, ale je to naprosto zbytečná a nesémantická věc, není prostě potřeba. A tohle je prostě hnus <div style="margin:10px; overflow:overflow; border:1px solid green"> <input style="display:block; width:100%; padding:10px; position:relative; left:-10px"> </div> Pokud nejsem autorem, nebo koukám na kód po delší době tak tady u toho budu pár s přemýšlet, proč jsem to udělal takhle hnusně ... opravdu zbytečné, jak jsem již jednou napsal, ale každý nechť si kódí jak potřebuje, hlavně aby to frčelo v těch nejnižších verzích IE ... uaaaa |
||
| margin Profil * |
#21 · Zasláno: 30. 4. 2013, 01:29:29
Kcko:
„Pak se mu změní obalový div a on bude upravovat na dvou místech?“ Pokud bude pevná šířka, tak ano, budou se muset požít znalosti počtů ze druhé třídy základní školy. Pokud tam bude obalový DIV, matrjoška, tak se šířka přizpůsobí. „A tohle je prostě hnus“ Však v [#16] píšu, že „mi přijde zbytečné šoupnout input o 10px doprava a zpět, obalovému DIVu stačí nastavit pravý margin. „hlavně aby to frčelo v těch nejnižších verzích IE ... uaaaa“ To přece nevadí, úáááá |
||
| Kcko Profil |
#22 · Zasláno: 30. 4. 2013, 11:55:53
margin:
Matrjoška je zbytečná, v dnešní době přežitek, všechny moderní prohlížeče se přizpůsobí box-border modelu , umí to i IE8 tak není důvod hrát si s matrjoškou ... Však v [#16] píšu, že „mi přijde zbytečné šoupnout input o 10px doprava a zpět, obalovému DIVu stačí nastavit pravý margin. Stále zbytečné Uáááááááááá |
||
| Xperia Profil |
#23 · Zasláno: 1. 5. 2013, 12:32:04
Bezva, bezva a bezva, marginova rada funguje perfektně a jednoduše :) Děkuji Ti moc a vám všem taky :)
|
||
|
Časová prodleva: 11 let
|
|||
0