nicht angemeldet
Input-Felder werden bei langem Text im IE breiter
Hallo,
Mittlerweile habe ich schon einige Jahre mit HTML, Javascript und PHP zu tun und bin seltsamerweise noch nie auf dieses scheinbar simple Problem gestossen, welches plötzlich in einer typischen Standard-Situation auftaucht.
Ich wäre um jede Hilfe dankbar!
Folgendes Problem:
Ich habe eine Seite, die Benutzern Text-Eingaben wie Headline und Fliesstext erlaubt, welche dann in eine Datenbank eingetragen werden.
Das Problem tritt auf, wenn die Seite nach der Datenbank-Eintragung nochmal aufgerufen wird um die Eingaben nochmal ändern zu können.
Hierzu schreibe ich die Headline in den VALUE eines INPUT type=text und den Fliesstext in ein Textarea-Feld.
Das Textarea-Feld ist kein Problem, sondern nur der INPUT type=text.
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 (welcher im Original per PHP eingetragen wird) 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.
Das ist komisch, weil normalerweise, so wie ich es kenne, eben nur soviel vom Text sichtbar sein sollte, wie das Textfeld in der Breite erlaubt. Der Rest des Textes ist ja normalerweise verborgen und kann nur durch die Cursor-Taste oder Maus-Selektierung gesehen werden. Richtig?
Das ist das erste komische Verhalten.
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?
Ich kann es mir nicht erklären und hoffe, dass jemand von Euch mir helfen kann. Ich habe zum Debuggen folgende Datei angelegt (http://www.kastenmeier.com/test_ie_input_width.html), sie sollte oben auch anklickbar sein.
Besucht einfach mal diese Test-Seite, und schaut Euch den Quelltext an. Die Datei zeigt mehrere Szenarios der selben Situation und enthält Erklärungen. Im IE öffnen, weil Firefox und Netscape damit kein Problem haben.
Bitte helft.
GodfatherX
-
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  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
-
<table width="300" cellpadding="0" cellspacing="0" border="1" style="table-layout:fixed;">
Hallo Axel,
vielen vielen tausend Dank.
Ich hab schon gedacht, ich kreig keine Antwort mehr, oder dass keiner was weiss.Die Einfügung von style="table-layout:fixed;" in den TABLE-Tag, der dem IMPUT übergeordnet ist, hat das Problem gelöst.
Unerwünschte Auswirkungen gibt es KEINE, soweit ich sehen kann.
Es sieht jetzt so aus, wie es aussehen soll. Und das in allem getesteten Browsern.SUPER Danke!!!
GodfatherX
-
Btw: Die Angabe von size="30" ist überflüssig.
Das size="30" ist nur ein Überbleibsel vom Herumprobieren, ob es einen Unterschied macht, dieses Attribut zusätzlich zu setzen oder nicht.
Das muss natürlich nicht rein, wenn ich die Breite mit style="width:100%;" bestimme.
Vielen Dank nochmal für Deine Hilfe.
GodfatherX
-
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>Welche weiteren Auswirkungen table-layout:fixed; auf Deine Tabelle hat, musst Du natürlich austesten.
Ich hab mich getäuscht, es DOCH Auswirkungen:
Der von Axel vorgeschlagene (leicht abgewandelte) Code:
<table width="300" cellpadding="0" cellspacing="0" border="1" style="table-layout:fixed;">
<tr>
<td colspan="1" style="width:30%;"><input type="text" name="test1" value="Kurzer Text" maxlength="255" style="width:100%;"></td>
<td colspan="1" style="width:30%;"><input type="text" name="test2" 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 colspan="2">Das ist ein Test, der eine gewisse Breite hat und innerhalb der Tabelle umbrechen sollte.</td>
</tr>
</table>macht plötzlich ungeachtet der width-Angabe beide Spalten gleich breit (50%).
Um das zu verhindern, und die Spaltenbreite festzulegen, muss man colgroup und col verwenden wie folgt:<table width="300" cellpadding="0" cellspacing="0" border="1" style="table-layout:fixed;">
<colgroup>
<col width="30%">
<col width="70%">
</colgroup>
<tr>
<td colspan="1"><input type="text" name="test1" value="Kurzer Text" maxlength="255" style="width:100%;"></td>
<td colspan="1"><input type="text" name="test2" 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 colspan="2">Das ist ein Test, der eine gewisse Breite hat und innerhalb der Tabelle umbrechen sollte.</td>
</tr>
</table>Dann funktioniert alles!
Gruss,
GodfatherX-
Hallo,
Ich hab mich getäuscht, es DOCH Auswirkungen:
*g* Num mal nicht hektisch werden ;-)).
<td colspan="1" style="width:30%;"><input type="text" name="test1" value="Kurzer Text" maxlength="255" style="width:100%;"></td>
<td colspan="1" style="width:30%;"><input type="text" name="test2" 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>macht plötzlich ungeachtet der width-Angabe beide Spalten gleich breit (50%).
Genau das _soll_ der Code machen, wenn Du beide Spalten 30% breit machst. Was hast Du erwartet, dass hinten 40% frei bleiben?
Mit
<td colspan="1" style="width:30%;">
<td colspan="1" style="width:70%;">
sollte es schon funktionieren.Davon abgesehen ist die Definition von Spaltenbreiten über COLGROUP und COL natürlich eine _sehr_ gute Idee. Dafür gibt es diese Elemente schließlich.
viele Grüße
Axel
-
-