Problem mit dem Layout meiner Input-Felder

[claus ginsel]

Moin

bisher dachte ich, mein Problem wäre kein Problem, sondern nur eine spezielle Verhaltensweise meines Browsers auf dem Galaxy, dem Samsung Browser.

Auf dem Desktop, da sowohl im Edge als auch im Firefox, sieht das alles ok aus, bis auf eine Kleinigkeit.

Der Reihe nach:

Ich hatte heute diese Seite, aus der der Ausschnitt stammt auf mit meinem Galaxy, und da fiel mir auf, dass das Verhalten der Input-Felder anders war als bei meiner Seite.

So sieht das bei meiner Seite aus, wenn das Feld nicht den Focus hat, so wie es auch aussehen soll:

Klicke ich da rein, dann passiert folgendes, Das Feld wird schmaler und der Text wird größer:

Hinzu kommt, dass wenn ich aus den Browservorschlägen auswähle, der Hintergrund blau eingefärbt wird:

Übrigens färbt auch Edge den Hintergrund blau ein nach Auswahl aus den Vorschlägen.

Das beides find ich blöd. Mit dem 1. Bild wird jetzt aber deutlich, dass mein CSS verantwortlich ist. Ich hab allerdings keine Ahnung, in welcher Richtung ich hier suchen soll.

Das mit dem "springen" des Input-Feldes würde ich irgendwie auf meine CSS-Weiche hinsichtlich der Auflösung des Screen verorten.

Hier mal mein html:

<label>&nbsp;&nbsp;&nbsp;
	<span class="i_span">&nbsp;Nutzername&nbsp;</span><br>
	<input name="input_nutzer" class="i_input" type="text" pattern="(^[a-zA-Z0-9äöüß\-]{3,20}$)" title="Nutzername" size="40" maxlength="20" required>
</label>

und das css dazu:

@media (min-resolution: 151dpi) and (orientation: landscape) {
/* box ist der body */
	#box {position:relative; width:80%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:70%;}
}
@media (min-resolution: 151dpi) and (orientation: portrait) {
	#box {position:relative; width:90%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:100%; }
}
/*Monitore von PCs, das A8 Tablet */
@media (max-resolution: 150dpi) and (orientation: landscape) {
	#box {position:relative; width:60%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:50%;}
}
/* das A8 Tablet */
@media (max-resolution: 150dpi) and (orientation: portrait) {
	#box {position:relative; width:90%; margin-right:auto; margin-left:auto;}
	input[type=text] {width:80%;}
}

.i_input {
	background-color:white;
	box-sizing: border-box;
	height: 47px; 
	font-size:1.3em; 
	border: 3px solid #aaaaaa; 
	padding-left: 20px;
	border-radius: 8px;
	width:100%;}
.i_input:valid {color: #333333;}
.i_input:invalid {color: red;}
.i_span {
		background-color:white;
	margin-left:-26px; /* neu */	
	position:relative;
	top: 9px;
	font-size:1em; 
	color: #aaaaaa; 
	font-weight: bolder;}

Habt ihr vielleicht eine Idee?

Gruß Claus

[Gunnar Bittersmann]

@@claus ginsel

So sieht das bei meiner Seite aus, wenn das Feld nicht den Focus hat, so wie es auch aussehen soll:

Nein, so soll es nicht aussehen. Der Farbkontrast ist nur 2.21 : 1 (Checker), notwendig ist 4.5 : 1.

Außerdem ist die Schrift zu klein. Du magst noch(!) Adleraugen haben; für andere ist das schlecht bis gar nicht lesbar.

Hier mal mein html:

<label>&nbsp;&nbsp;&nbsp;
	<span class="i_span">&nbsp;Nutzername&nbsp;</span><br>
	<input name="input_nutzer" class="i_input" type="text" pattern="(^[a-zA-Z0-9äöüß\-]{3,20}$)" title="Nutzername" size="40" maxlength="20" required>
</label>

Die   sind nicht gut. Abstände machst du mit CSS.

Die HTML-Spezifikation sieht das mit input in label so vor, dass das Eingabefeld dadurch seine zugängliche Beschriftung hat. Dummerweise hält sich nicht jede Software an die Spezifikation (looking at you, Microsoft Dragon), sodass du doch noch dem input eine ID und dem label ein gleichlautendes for-Attribut geben solltest.

Das pattern lässt weder René noch Zoë ihre Namen als Nutzernamen verwenden, Ayşe und Paweł auch nicht. Du solltest die erlaubten Zeichen erweitern – oder die Beschränkung ganz infragestellen.

Habt ihr vielleicht eine Idee?

Ja: du verrätst uns, wo man sich dein Problem online ankucken kann – ohne dass wir das jeder für sich nachstellen müssen. Das sollte deine Aufgabe sein. Codepen, Dabblet o.ä., wenn du nicht deine Seite verlinken willst.

🖖 Живіть довго і процвітайте

[claus ginsel]

Hallo Gunnar

hier eine Test-Seite:

Testseite

Gruß Claus

[claus ginsel]

Das hat nicht geklappt: Also hier die Testseite:

wipmv.de/test.html

Gruß Claus

[Gunnar Bittersmann]

@@claus ginsel

Das hat nicht geklappt:

Ja, da fehlte das https:// im URL. Ich hab das mal berichtigt.

🖖 Живіть довго і процвітайте

[claus ginsel]

danke Dir 👍

[Gunnar Bittersmann]

@@claus ginsel

Testseite

Klicke ich da rein, dann passiert folgendes, Das Feld wird schmaler und der Text wird größer

Das Verhalten kann ich auf dem iPhone nachvollziehen. Und dir sagen: It’s a feature, not a bug. Der Browser vergrößert das Eingabefeld, um die Schrift auf lesbare Größe zu bringen. Du setzt die Schriftgröße für input auf 1.3em, aber vorher unsinnigerweise die für html auf 11px. Und 1.3 × 11px = 14.3px findet der Browser vernünftigerweise zu klein und vergrößert das Ganze.

Was willst du mit den font-size-Angaben in den Media-Querys bezwecken?

Und was mit den font-family-Angaben? Da die immer gleich sind, haben die nichts in den Media-Querys zu suchen. DRY – don’t repeat yourself!

Und die Reihenfolge ergibt wohl auch keinen Sinn. Oder gibt es Systeme, auf denen weder Helvetica noch Arial installiert ist, aber Geneva? Helvetica und Arial sind auch keine gut lesbaren Schriften, außerdem pottlangweilig. Ich würde sie nicht verwenden.

Deine Kommentare bei den Media-Querys deuten stark darauf hin, dass du die Sache falsch angehst. Du versuchst, für ganz spezielle Geräte zu optimieren? Das kann nur schiefgehen.

Und was willst du mit den ganzen Breitenangaben in Prozent bezwecken? Anstatt 80% anzugeben und für andere Viewportbreiten andere Prozentwerte, machst du besser 10% Rand, aber mindestens bspw. 1em: margin-inline: max(10%, 1em).

Das <div id="box"> ist überflüssig (@at sagt: bedauerlich bis ärgerlich), ebenso die ganzen <br> (macht Geräusche).

Und was willst du mit den ganzen Breitenangaben für input[type=text] bezwecken? Sinnvoll ist es, die Breite auf eine gewisse Zeichenanzahl zu begrenzen, aber das Feld nicht breiter werden zu lassen als der Viewport hergibt: width: min(30ch, 100%).

Und wieso überhaupt type=text? Abgesehen davon, dass das im Selektor keine so gute Idee ist (PPS und Folgeposting): Der Screenshot im OP zeigt, dass der Nutzername eine E-Mail-Adresse ist. Dann sollte das Feld auch so beschriftet sein und auf type=email gesetzt werden.

Hinzu kommt, dass wenn ich aus den Browservorschlägen auswähle, der Hintergrund blau eingefärbt wird

Im iPhone gelb. Und wieder: It’s a feature, not a bug. Der Browser macht etwas für Nutzer kenntlich. Ob dir das gefällt, ist irrelevant. Der Wurm muss dem Fisch schmecken, nicht dem Angler.

🖖 Живіть довго і процвітайте

[claus ginsel]

Moin Gunnar

erstmal vielen Dank für deine ausführlichen Bemerkungen.

... findet der Browser vernünftigerweise zu klein und vergrößert das Ganze

Aber genau das passiert ja nicht mit meinem Handy und der Seite, von der die 1. Grafik ist, obwohl die Schriftgrößen ähnlich, vielleicht sogar gleich sind.

Was willst du mit den font-size-Angaben in den Media-Querys bezwecken?

Es ist ja nunmal so, dass ein Zeichen kleiner dargestellt wird bei steigender Pixeldichte, der Text soll aber auch auf dem Handy lesbar sein.

Deine Kommentare bei den Media-Querys deuten stark darauf hin, dass du die Sache falsch angehst. Du versuchst, für ganz spezielle Geräte zu optimieren? Das kann nur schiefgehen.

ich musste mich ja irgendwie da ran tasten, hab dazu halt die mir zur Verfügung stehenden Geräte genommen und festgelegt, dass diese jeweils Durchschnittsgeräte sind.

Und was willst du mit den ganzen Breitenangaben in Prozent bezwecken? ... margin-inline: max(10%, 1em)

Dein Vorschlag ist mir neu, aber cool. Jedoch möchte ich auf Desktops nicht über die gesamte Breite gehen, sondern die Darstellung deutlich schmaler gestalten.

Das <div id="box"> ist überflüssig

Das hab ich mir schon gedacht ;)

Ich sehe <br> als Strukturelement, wie sollte ich stattdessen vorgehen? Andere Block-Elemente, die aber zu anderen Zeilenhöhen führen? Oder alles mit css positionieren?

Und was willst du mit den ganzen Breitenangaben für input[type=text] bezwecken?

Genau das, an den Viewport anpassen. Was eleganter geht, wie Du aufzeigst.

Und wieso überhaupt type=text? Abgesehen davon, dass das im Selektor keine so gute Idee ist (PPS und Folgeposting): Der Screenshot im OP zeigt, dass der Nutzername eine E-Mail-Adresse ist. Dann sollte das Feld auch so beschriftet sein und auf type=email gesetzt werden.

Das hab ich im Selektor, weil die verschiedenen Typen (zumindest in der Vergangenheit) doch unterschiedlich angezeigt werden. Der Screenshot mit der Mail-Adresse, auf den Du verweist, ist nicht meine Seite. Im Übrigen sollte man unbefugten auch so wenig wie möglich Hinweise liefern, welche Eingaben-Formate gerade für die Anmeldung erwartet werden. Der Befugte kennt ja seinen Nutzernamen, egal ob dieser nun einer Mail-Adresse entspricht oder nicht.

Im iPhone gelb. Und wieder: It’s a feature, not a bug. Der Browser macht etwas für Nutzer kenntlich.

Sicher ist es ein Feature, aber ich verweise wieder auf den 1. Screenshot, dort wird der Hintergrund nach Auswahl aus Liste auf meinem Gerät mit demselben Browser auch nicht blau eingefärbt. Also muss man das aushebeln können, aber wie?

Gruß Claus