Problem das <textarea> in Firefox größer ist, als in allen anderen Browsern
RavenPixel
- browser
- html
Hi,
ich habe ein Formular erstellt, welches ein <textarea> beinhaltet.
Soweit gibt es auch keine weiteren Probleme, jedoch ist dieses Feld in der Ansicht bei Mozilla Firefox viel größer als in allen anderen Browsern, in denen ich es gestetet habe (Chrome, Edge, Opera).
Dazu der Code:
<textarea readonly="true" class="bemku" name="bemerkung" cols="90" rows="10" maxlength="10000" wrap="soft" style="font-size: 14px;"></textare>
Kann mir dazu jemand eine Erklärung geben bzw mir verraten, wie ich das verhindern könnte?
Hallo RavenPixel,
<textarea readonly="true" class="bemku" name="bemerkung" cols="90" rows="10" maxlength="10000" wrap="soft" style="font-size: 14px;"></textare>
Du wirst in allen Browsern kleine Unterschiede sehen, weil die Abmessungen mithilfe der Größe eines durchschnittlichen Buchstaben berechnet wird. Außerdem kann es unterschiedliche Defaultabmessungen geben, zudem sind textareas in der Größe veränderbar.
Es mag auch sein, dass sich der Firefox am fehlerhaften schließenden Tag stört.
<textarea readonly="true" class="bemku" name="bemerkung" cols="90" rows="10" maxlength="10000" wrap="soft" style="font-size: 14px;"></textare>
Styleangaben sollten ins CSS
Kann mir dazu jemand eine Erklärung geben bzw mir verraten, wie ich das verhindern könnte?
Durch Größenangaben mit CSS.
Bis demnächst
Matthias
@@RavenPixel
ich habe ein Formular erstellt, welches ein <textarea> beinhaltet.
Zu welchem Zweck, wenn du readonly
setzt?
Soweit gibt es auch keine weiteren Probleme, jedoch ist dieses Feld in der Ansicht bei Mozilla Firefox viel größer als in allen anderen Browsern, in denen ich es gestetet habe (Chrome, Edge, Opera).
Du hast vermutlich keine Breite für das Textfeld angegeben.
LLAP 🖖
Hallo und guten Abend,
Dazu der Code:
<textarea readonly="true" class="bemku" name="bemerkung" cols="90" rows="10" maxlength="10000" wrap="soft" style="font-size: 14px;"></textarea>
Kann mir dazu jemand eine Erklärung geben bzw mir verraten, wie ich das verhindern könnte?
Ich finde das auch immer wieder spannend ;-)
Aber dazu müsste man jetzt wissen, nach welchemn Font in welcher Größe die Textarea die Zeilen und Spalten bemisst, wie hoch sie die Zeilenhöhe annimmt, usw.
Standardfont ist vermutlich ein monospace.
ich habe da mal selber 'was gebastelt und da ist die Textarea nun in allen hier verfügbaren Browsern gleich dargestellt. Du kannst aber sehen, dass es eine Diskrepanz zwischen Font-Size und Anzahl der Zeilen gibt. Das liegt eben daran, dass Zeilenhöhe <> Fontsize ist!
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Textarea und Größenangaben</title>
<style type="text/css">
body {
font-family:sans-serif;
font-size:12pt;
}
#ta1{
font-family:courier, monospace;
font-size:1em;
width:20em;
height:6em;
}
</style>
</head>
<body>
<textarea id="ta1"></textarea>
</body>
</html>
Grüße
TS
@@TS
dass Zeilenhöhe <> Fontsize ist!
Merkel-Raute?
Das hat bei mir aber eine Weile gedauert, bis es mir dämmerte, dass du „ungleich“ meintest. Warum nimmst du nicht das Zeichen ≠, wenn schon nicht Text?
LLAP 🖖
Hallo und guten Morgen,
@@TS
dass Zeilenhöhe <> Fontsize ist!
Merkel-Raute?
Das hat bei mir aber eine Weile gedauert, bis es mir dämmerte, dass du „ungleich“ meintest. Warum nimmst du nicht das Zeichen ≠, wenn schon nicht Text?
Wir schaffen das!
Nach meinem Verständnis als alter ASCII-Geschädigter war das vollkommen klar, was gemeint war ;-P
Erklär doch bitte lieber mal, wie da die Zusammenhänge genau sind bei den Größenangaben für Font, Zeilenhöhe, Laufweite, Anzahl Spalten, Anzahl Zeilen. Das Phänomen ist ja nicht neu, aber wirklich durchschaut habe ich das auch bis heute noch nicht!
Grüße
TS
@@TS
Erklär doch bitte lieber mal, wie da die Zusammenhänge genau sind bei den Größenangaben für Font, Zeilenhöhe, Laufweite, Anzahl Spalten, Anzahl Zeilen.
Siehe Spec, cols
: “The user agent may use the textarea
element’s character width as a hint to the user as to how many characters the server prefers per line (e.g., for visual user agents by making the width of the control be that many characters).”
Konjunktiv. (Hervorhebungen von mir.)
rows
: “Visual user agents should set the height of the control to the number of lines given by character height.”
LLAP 🖖
Hallo,
dass Zeilenhöhe <> Fontsize ist!
Merkel-Raute?
Das hat bei mir aber eine Weile gedauert, bis es mir dämmerte, dass du „ungleich“ meintest.
bei mir nicht, denn ich erinnere mich dunkel, dass <> auch schon in BASIC (lang, lang ist's her) der Operator für ungleich ist, und wenn mich meine Erinnerung nicht täuscht, auch in Pascal.
Warum nimmst du nicht das Zeichen ≠, wenn schon nicht Text?
Oder wenigstens !=.
Ciao,
Martin
Hallo Der Martin,
denn ich erinnere mich dunkel, dass <> auch schon in BASIC (lang, lang ist's her) der Operator für ungleich ist, und wenn mich meine Erinnerung nicht täuscht, auch in Pascal.
Bis demnächst
Matthias
@@Matthias Apsel
denn ich erinnere mich dunkel, dass <> auch schon in BASIC (lang, lang ist's her) der Operator für ungleich ist, und wenn mich meine Erinnerung nicht täuscht, auch in Pascal.
Ich erinnere mich auch dunkel, dass es mal Sprachen gab, in denen das so war. Die Erinnerung täuscht nicht: lang, lang ist’s her.
LLAP 🖖
Hallo Gunnar Bittersmann,
Ich erinnere mich auch dunkel, dass es mal Sprachen gab, in denen das so war.
Bis demnächst
Matthias
Ich erinnere mich auch dunkel, dass es mal Sprachen gab, in denen das so war.
ANSI SQL?!?
Hallo und guten Abend,
noch ein kleiner Nachtrag: die Seite über die Maßeinheiten gibt eine Übersicht über die unterschiedlichen Maßsysteme für HTML bzw. in CSS.
Hier möchte ich Dir für die Textarea besonders die Einheit ch ans Herzlegen für die Spaltenzahl. Berücksichtige aber, dass sich der vertikale Scrollbalken einschalten könnte. Der ist beim Firefox Bestandteil der Textarea-Breite (SPaltenzahl), beim IE war er zusätzlich.
Für 20 Spalten bietet sich eine Angabe von "width:20.15ch" an. Für 5 Zeilen eine Angabe von "height:5.75em".
Grüße
TS