Axel Richter: Input-Felder werden bei langem Text im IE breiter

Beitrag lesen

Hallo,

Folgendes Problem:

http://www.kastenmeier.com/test_ie_input_width.html

Beide Felder befinden sich untereinander in einer Tabelle, welche eine feste Breite hat. Ich möchte aber, dass die Felder die Tabellenbreite voll einnehmen und dazu setze ich in im STYLE-Attribut den Wert "width:100%;".

Alles funktioniert problemlos, ausser wenn der Default-Value länger ist als die Tabelle breit ist. In diesem Fall bricht im Internet Explorer das INPUT Text-Feld in der Breite so weit aus, dass es den gesamten Text darstellen kann.

Viel komischer und unverständlicher wird das Verhalten allerdings, wenn irgendwo im Text ein UMLAUT ist. Dann bricht das Textfeld nämlich plötzlich nicht mehr aus seiner Breite aus. WARUM NUR DANN?

Das ist offensichtlich ein Bug, zumal diese unterschiedliche Reaktion bei value-Werten mit und ohne Zeichen >  auftritt. Das Zeichen &#127 ist nämlich die Grenze. Sobald ein Zeichen € oder größer im value auftaucht, tritt das Problem nicht mehr auf.

Würgaround:

<table width="300" cellpadding="0" cellspacing="0" border="1" style="table-layout:fixed;">
<tr>
 <td><input type="text" name="test" value="Langer Test-Text, der nicht komplett in das INPUT-Feld passen sollte, jedoch das Feld nicht weiter als die gesetzte Breite ausdehen soll." maxlength="255" style="width:100%;"></td>
</tr>
<tr>
 <td>Das ist ein Test, der eine gewisse Breite hat und innerhalb der Tabelle umbrechen sollte.</td>
</tr>
</table>

Btw: Die Angabe von size="30" ist überflüssig.

Welche weiteren Auswirkungen table-layout:fixed; auf Deine Tabelle hat, musst Du natürlich austesten.

viele Grüße

Axel