Autor Zpráva
hordubal
Profil
Narazil jsem na tuhle podivnost: chci, aby textové pole formuláře <INPUT> bylo stejně široké jako <SELECT>. Udělal jsem si styl se šířkou (width=...) , ale stejně je <SELECT> o fous širší:

<!DOCTYPE HTML>
<html><head><style>
.trida {width: 100px}
</style></head>

<body >
<select class="trida">
<option value="1">Jeden</option><option value="2" >Dva</option><option value="3" >Tři</option>
</select>
<br>
<input class="trida" type="text">
</body>
</html>

Zajímavá na tom je skutečnost, že když zruším (nebo změním) deklaraci !DOCTYPE, tak je šířka stejná - předpokládám že browser přejde do quirk modu který se prostě chová jinak. Nicméně chování IE i FireFoxu je v tomto ohledu úplně stejné.

Prozatím jsem to řešil tak, že prostě nastavím WIDTH obou prvků jinak, abych měl na obrazovce stejný výsledek.
Víte o nějakém lepším řešení?
Trejpa
Profil
hordubal:
Je to tím, že se k šířce inputu připočítává šířka paddingu a borderu. Když je vynuluješ, bude input stejně široký jako select. To ale asi nechceš. Řešení jsou dvě:

1. Změnit velikost inputu tak, aby bylo počítáno s paddingem a borderem:
.trida {width: 100px}
input.trida {
width: 96px;
border-width: 1px;
padding: 1px; }

2. Změnit režim výpočtu velikosti z obsahového na okrajový:
.trida {
width: 100px;
-moz-box-sizing: border-box;
box-sizing: border-box; }

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: