Autor Zpráva
Xperia
Profil
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
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
Alebo sa dá ešte použiť padding-top a padding-bottom ;)
Camo
Profil
Xperia:
Malo by to vyriešiť display:block na tie inputy, bez udania šírky(len padding).
Xperia
Profil
Díky za tipy, večer je zkusím :)
Stalker
Profil
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 *
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
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
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
Plaváček:
O tom slyším prvně. Díky moc.
Plaváček
Profil
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
Plaváček:
aha :) Ještě jsem si to ani nezačal číst :)) I tak díky
Chamurappi
Profil
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 *
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
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
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 *
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 *
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
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
Bezva, bezva a bezva, marginova rada funguje perfektně a jednoduše :) Děkuji Ti moc a vám všem taky :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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