rozdílná velikost textarey a inputu v chrome

Jan Matoušek

(12 hodnocení)

3. 8. 2011 00:13:50

Řeším problém s rozdílnou velikostí v chromu textarey a inputu.

v css mám nastaveno width: 200px; a border: 1px solid; pro input i textareu

v html prvky vypisuji pod sebou:

input

textarea

ve všech prohlížečích je to ok, ale v chrome je textarea o 4px širší

jak kdyby rámečky rendrovar do vnitř u inputu a vně u textarey

narazil jste na to také někdo, dá se to nějak obejít?

nebo jen dělám nějakou chybu...

3. 8. 2011 00:13:50

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662535

Ondrej Vertat

(48 hodnocení)

3. 8. 2011 08:18:50

Vzhledem k tomu, že formulářové prvky se vykreslují dle operačního systému a prohlížeče, je nepatrná odlišnost celkem běžná. Každopádně v tomto případě bys měl aplikovat ještě další styly. Od paddingu po velikost fontu, oboje ovlivňuje velikost prvků.

3. 8. 2011 08:18:50

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662534

Lukáš Urban

(7 hodnocení)

3. 8. 2011 08:38:21

Doporučuji používat css reset, většině těchto problémů se s jeho pomocí lze elegantně vyhnout.

Btw nebylo by úplně od věci sem dát odkaz na ten kód, bez něj je težké ti poradit.

3. 8. 2011 08:38:21

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662533

Miloslav Lešetický

(10 hodnocení)

3. 8. 2011 08:45:30

Lukáš Urban

CSS reset rozdíly ve vykreslování formulářových prvků není schopen ošetřit, naopak může starosti přidělat.

Paradiso

Se stylováním formulářových prvků přesně na pixel napříč prohlížeči a rozličnými operačními systémy neuspěješ (pokud se tedy nechceš uchýlit k podobné Javascriptové opičárně http://customformelements.net/demopage.php), proto je lepší mít na paměti, že méně je někdy více.

Více o tématu:

http://latrine.dgx.cz/dokonale-stylovani-formularu

http://latrine.dgx.cz/jeste-dokonalejsi-stylovani-formularu

http://www.plavacek.net/formulare/stylovani-formularu.html

Já bych podobné pixelové nuance neřešil.

3. 8. 2011 08:45:30

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662532

Lukáš Urban

(7 hodnocení)

3. 8. 2011 08:56:47

Napsal Plaváček;684810

CSS reset rozdíly ve vykreslování formulářových prvků není schopen ošetřit, naopak může starosti přidělat.

Je jasné, že některé prvky jsou systémové a s pomocí css není možné je měnit. Nevím ale o žádných problémech s resetem, mohu se zeptat které to jsou?

3. 8. 2011 08:56:47

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662531

Miloslav Lešetický

(10 hodnocení)

3. 8. 2011 08:59:02

Lukáš Urban

Záleží na tom, jaký reset používáš, kupříkladu ten od Erica Meyera vcelku pochopitelně do formulářových prvků (input, select, textarea) nezasahuje, viz http://meyerweb.com/eric/tools/css/reset/. A další ukázky jsou v těch odkázaných článcích o komentář výše http://latrine.dgx.cz/jeste-dokonalejsi-stylovani-formularu :)

3. 8. 2011 08:59:02

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662530

Lukáš Urban

(7 hodnocení)

3. 8. 2011 09:34:15

Souhlasím s tím, že formulář (ostatně celý web) by měl být jasný a přehledný. Souhlasím i s tím, že resetovat by se mělo s rozumem. Ale nestylovat něco jen proto, že se to dá zprasit...

3. 8. 2011 09:34:15

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662529

Miloslav Lešetický

(10 hodnocení)

3. 8. 2011 09:52:40

Lukáš Urban

Možná si jenom nerozumíme. Nejde o to nestylovat proto, že se dá něco zprasit. Potíž je v tom, že formulářové prvky nastylovat tak, aby vypadaly všude úplně stejně, prostě nelze.

3. 8. 2011 09:52:40

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662528

Lukáš Urban

(7 hodnocení)

3. 8. 2011 09:59:07

Plaváček

Reagoval jsem spíš na článek na který jsi odkazoval. To, že formuláře v současné době nemohou bez použití javascriptu vypadat všude stejně však nepopírám a omlouvám se za nedorozumění ;-)

3. 8. 2011 09:59:07

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662527

Miloslav Lešetický

(10 hodnocení)

3. 8. 2011 10:06:47

Lukáš Urban

Pohoda, jenom diskutujeme. Ostatně, když už tady to téma je a dal jsem odkazy do kupy, přidám ještě dva na zajímavé články (jsou z roku 2007, jenže od té doby se nic podstatného nezměnilo), mohou se někomu hodit:

- konkrétní ukázky vzhledu prvků formuláře v různých operačních systémech a prohlížečích http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/

- krátké vysvětlení od Erica Meyera, proč je lepší nestylovat http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

Závěrem bych rád všem kodérům poradil, aby si ušetřili starosti a zbytečnou práci a nechali způsob, jakým budou uživateli předloženy formulářové prvky, plně v režii prohlížeče (nebo operačního systému).

3. 8. 2011 10:06:47

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662526

Ondrej Vertat

(48 hodnocení)

3. 8. 2011 12:49:31

V dnešní době lze z drtivě části dosáhnout stejného vzhledu formulářových prvků i bez JS. Bez toho se stále neobejdeme jen u některých prvků, které jsou natvrdo vykreslovány dle OS a prohlížeče.

3. 8. 2011 12:49:31

https://webtrh.cz/diskuse/rozdilna-velikost-textarey-a-inputu-v-chrome#reply662525

Pro odpověď se přihlašte.

Přihlásit