Input-Feld Size/Width

[Hilfebedürftiger]

Hallo liebe Helfer,

ich habe mehrere Input-Felder.

Da ich genau weiss wieviele Zeichen ein Input-Feld aufnehmen soll, habe ich die MaxLength und Size auf diese Anzahl von Zeichen gesetzt.

Außerdem wurden folgende Attribute per CSS gesetzt:

  
.input{  
  font-family: Tahoma;  
  font-size: 15px;  
  font-weight: bold  
}  

Nun unterscheidet sich leider die Breite der Input-Felder nicht nur aufgrund der in Size angegebenen Längen, sondern auch bei unterschiedlichen Browsern (bzw Browserversionen).

Also zB bei einer Input Size=2 die Breite im 1. Browser: 30px, im 2. Browser 40px...

Eine Lösung dafür wäre, statt der Size-Angabe den Inputfelder die Breite per
style="width: .. px" vorzugeben.

<INPUT class="input" maxLength="2" size="2" name="xyz" style="width: 30px">

Leider funktioniert diese Variante nur, wenn nicht irgendwann das CSS geändert wird.
Denn mit font-size: 25px müssten ja auch die Weiten-Angabe korrigiert werden => jede Datei anfassen...

Zweite Möglichkeit wäre, für jede Size eine eigene Definition zu machen und die zugehörige Breite mitzugeben.

Also zB den Inputfeldern die class="inputfeld2stellig" oder class="inputfeld3stellig" zu geben.

Nachteil wäre, dass man dann x Definitionen hat, wie zB:

  
.inputfeld2stellig{  
  font-family: Tahoma;  
  font-size: 15px;  
  font-weight: bold;  
  width: 30px;  
}  
  
.inputfeld3stellig{  
  font-family: Tahoma;  
  font-size: 15px;  
  font-weight: bold;  
  width: 38px;  
}  

welche im Falle einer Änderung auf font-size: 25px genauso gepflegt werden müssen...

Vielleicht hat ja jemand eine Lösung, mit der anhand der Schriftart/Größe und Size-Angabe die Breite unabhängig vom Browser festgelegt werden kann!?
Und das ganze natürlich möglichst pflegeleicht ;-)

Nehme auch gerne Denkanstösse entgegen :-)

[Tim]

Hallo,

<INPUT class="input" maxLength="2" size="2" name="xyz" style="width: 30px">

Leider funktioniert diese Variante nur, wenn nicht irgendwann das CSS geändert wird.
Denn mit font-size: 25px müssten ja auch die Weiten-Angabe korrigiert werden => jede Datei anfassen...

Vielleicht wäre es gut wenn du uns verrätst, warum du die Schriftgröße nachträglich ändern willst. Mir fällt spontan kein sinnvoller Verwendungszweck ein und ohne diese Anpassungen würde das Problem nicht auftreten.

Viele Grüße,
Tim

[Hilfebedürftiger]

Vielleicht wäre es gut wenn du uns verrätst, warum du die Schriftgröße nachträglich ändern willst. Mir fällt spontan kein sinnvoller Verwendungszweck ein und ohne diese Anpassungen würde das Problem nicht auftreten.

Weil die Seiten auf unterschiedlichen Geräten mit unterschiedlichen Displaygrößen angezeigt werden sollen...

Und was auf dem Display eines MDE gut aussieht, ist bei einem anderen evtl zu klein/groß...

[Tim]

Hallo,

Weil die Seiten auf unterschiedlichen Geräten mit unterschiedlichen Displaygrößen angezeigt werden sollen...

Da Die Seite aber auf allen Geräten gleichzeitig gut aussehen soll, musst du ja sowieso eine Definition finden die alles abdeckt und musst später nichts mehr ändern.

Vielleicht helfen die da die CSS Media Querys weiter. Dort kannst du verschiedene Styleshets für z.b. verschiedene Auflösungen definieren.

Viele Grüße,
Tim

[Hilfebedürftiger]

Da Die Seite aber auf allen Geräten gleichzeitig gut aussehen soll, musst du ja sowieso eine Definition finden die alles abdeckt und musst später nichts mehr ändern.

So war es bisher auch...
Neues Gerät => neue CSS mit angepasster Schrift und Schriftgröße.
Also einmal eingepflegt und gut...

Nur wurde beim Erstellen der Seiten eben nicht daran gedacht, dass sich irgendwann einmal die Berechnung der Breite von Inputfeldern so extrem unterscheiden würde, dass nichts mehr passt...
Der normale Text passt weiter gut drauf, aber die Inputfelder zerschiessen das komplette Layout.

Und um auf meine zweite Lösung umzusteigen muss ich dann eben wahrscheinlich doch auf jeder Seite die jetzigen input-Felder mit Size-Angabe entsprechend anpassen, so dass die entsprechende CSS-Klasse verwendet wird, wo es heute nur die "Basisklasse" ist...

Vielleicht helfen die da die CSS Media Querys weiter. Dort kannst du verschiedene Styleshets für z.b. verschiedene Auflösungen definieren.

Würde voraussetzen, dass die Geräte alle mit aktuellem HTML und CSS Standard umgehen können... Tun nur leider die alten Geräte nicht alle...
Also wahrscheinlich keine Lösung...

Viele Grüße,
Tim

Danke vielmals jedenfalls schonmal fürs helfen :-)

[Gunnar Bittersmann]

@@Hilfebedürftiger:

nuqneH

Vielleicht helfen die da die CSS Media Querys weiter. Dort kannst du verschiedene Styleshets für z.b. verschiedene Auflösungen definieren.

Würde voraussetzen, dass die Geräte alle mit aktuellem HTML und CSS Standard umgehen können...

Nein.

Nicht wenn man’s richtig™ macht: Das schwächste Gerät ist Default, also ein Smartphone. Für bessere/größere Geräte gibt es progressive enhancement.

Mobile first, sagte Ole doch schon.

Also wahrscheinlich keine Lösung...

Doch.

Qapla'

[Hilfebedürftiger]

Mobile first, sagte Ole doch schon.

Beitrag war noch nicht da, als ich angefangen habe die Antwort zu verfassen ;-)

Qapla'

Danke :-)

[ms-88]

Warum willst du eigentlich die Länge auch noch anpassen?
warum nicht einfach alle gleich lang machen?

Die höhe lasst du default und gibst allen einfach die eine basisklasse

class="...."

und je nach endgerät includest du das passende css welches dass breite und schriftgröße setzt.

[Hilfebedürftiger]

Warum willst du eigentlich die Länge auch noch anpassen?
warum nicht einfach alle gleich lang machen?

Weil auf einem kleinen Display wenig Platz ist, der sinnvoll genutzt werden muss.

Die höhe lasst du default und gibst allen einfach die eine basisklasse

class="...."

und je nach endgerät includest du das passende css welches dass breite und schriftgröße setzt.

So habe ich es ja schon. Eine Basisklasse wo Schriftart und Schriftgröße abhängig vom Endgerät definiert ist, die dann ersetzt werden.

Die Breite der Felder ist aber nicht nur von Schriftart und Schriftgröße abhängig, sondern auch von der Size, also der Menge der einzugebenden Zeichen.

Problem ist, dass bei gleicher Schriftgröße, gleicher Schriftart und gleicher Zeichenanzahl die verschiedenen Browserhersteller meinen unterschiedlich große (breite) Inputfelder zu benötigen...

[Ole.]

Relative Schriftgrößen könnten die da eine Menge Arbeit ersparen.

Ich arbeite bei "Responive Design mit mobile-first-Ansatz und Progressive Enhancement"-Projekten immer auf Basis einer leicht modifizierten HTML5Boilerplate. Damit hatte ich bisher noch keine Probleme, egal ob das Device einen 240x320 oder 1920x1200 Bildschirm hat.

Du kannst aber auch mit Attribut-Selektoren arbeiten, wenn dir das lieber ist. Dann hast du alle Styles zentral.

Um die Browser einzunorden finde ich normalize.css (und Vergleichbares) sehr hilfreich.

Gruß
Ole

[Hilfebedürftiger]

Da muss ich jetzt erstmal schauen und testen.

Danke jedenfalls schonmal für die Hilfe :-)

[Hilfebedürftiger]

Relative Schriftgrößen könnten die da eine Menge Arbeit ersparen.

Du kannst aber auch mit Attribut-Selektoren arbeiten, wenn dir das lieber ist. Dann hast du alle Styles zentral.

Also ich habe mal getestet:

CSS:

  
.input{  
  font-family: Tahoma;  
  font-size: 15px;  
  font-weight: bold  
}  
  
input[size="2"] { WIDTH: 100px; }  
input[size="3"] { WIDTH: 200px; }

HTML:

  
<INPUT class="input" maxLength="2" size="2" ><br>  
<INPUT class="input" maxLength="3" size="3" >  

Ergebnis:

Firefox 10.0.2 => zweites Feld ist doppelt so lang wie das erste
IE 8 => zweites Feld ist nur unwesentlich länger als das erste

Laut Quelle sollte das doch ab IE 7 funktionieren oder mach ich etwas falsch?

[Ole.]

Funktioniert bei mir ohne Probleme, allerdings mit den zuvor formulierten Voraussetzungen (modifizierte Boilerplate* etc.)

Gruß
Ole

*u.a. respond.js und Selectivizr