Checkbox einzeln verschieben?

[TooLate]

Hallo Forum

Ich habe eine Checkbox, vor der noch ein <label> sitzt. Wenn ich nun versuche, die Checkbox über die input-id leicht nach unten zu verschieben, verschiebt sich das <label> mit runter. Die Checkbox sollte aber auf den Doppelpunkt nach "gelesen" fluchten.

<label class="leftside" for="input11">Ich habe die <a href="agb.pdf" style="text-decoration: underline; color: black; font-size: 1.1rem;">AGB</a> gelesen:</label><input id="input11" type="checkbox" name="C1" size="20">

Ist es hier angebracht ein <div>-Kontainer für die Checkbox zu benutzen?

Zu sehen hier

TooLate

[Rolf B]

Hallo TooLate,

nicht nötig. Du hast zwei Inline-Elemente nebeneinander, die positioniert man anders als Block-Elemente. Gib der checkbox vertical-align: text-bottom; und entferne margin-top.

Der Default für vertical-align ist baseline, aber das ist zu hoch. Warum auch immer die Browser das tun...

text-bottom bezeichnet die Untergrenze der Buchstaben in dieser Zeile, inclusive Unterlängen. Mit margin-bottom kannst Du die Checkbox dann feinjustieren. Aber bitte in em, nicht px. margin-bottom: 0.1em; sollte passen.

Die schlechtere Alternative wäre, auf text-align und margins zu verzichten und die Checkbox mit position:relative; top: 0.2em; oder ähnlichem zurechtzuschieben. Das geht AUCH, berücksichtigt aber zu wenig die Eigenschaften des verwendeten Fonts.

Rolf

[Matthias Apsel]

Hallo Rolf B,

Der Default für vertical-align ist baseline, aber das ist zu hoch. Warum auch immer die Browser das tun...

Weil unser Text nun mal an der Grundlinie ausgerichtet ist.

Bis demnächst
Matthias

[TooLate]

Hallo RolfB

Dein...

vertical-align: text-bottom;

... in der CSS-Datei war hilfreich. Allerdings musste das...

margin-bottom: 5px;

...weg. Das war das Problem. Das und das fehlende "vertical-align: text-bottom;". Top wird benötigt, um den oberen Abstand ein zu stellen.

Vielen Dank für deine Hilfe - jetzt fluchtet es ausreichend!

Gruss TooLate ☺️

[Rolf B]

Hallo TooLate,

mach noch ein <br> vor die AGB Zeile.

Alternativ gestalte deine Formularzeilen nach diesem Muster:

<label>
   <span>Labeltext</span>
   <input ... >
</label>

label { display: flex; }
label span { flex-basis: 10em; /* oder so */

Dann brauchst Du keine <br> dazwischen, braucht in den Labels kein for-Attribut und hast alles ordentlich nebeneinander.

So kann das aussehen: https://jsfiddle.net/Rolf_b/qec4qsnt/2/

Die Zeilen im CSS mit /* fallback */ greifen, wenn der Browser keine Flexbox unterstützt (mach z.B. aus flex ein klex um das zu probieren).

Rolf

[TooLate]

Hi Rolf B

Du wirst jetzt wahrscheinlich lachen - aber genau so war das ursprünglich geplant!

Die vertikale Fluchtlinie sollte, so wie in deinem Beispiel, zwischen dem Doppelpunkt und dem Eingabefeld verlaufen. Weil aber wegen der "Flex"-Geschichte wieder nicht sicher gestellt werden kann, ob das über all läuft, habe ich dann alle Abstände händisch eingestellt.

Das mit dem <br> probier ich bei Gelegenheit aus, muss gerade weiter…

Herzlichen Gruss TooLate

[TooLate]

Hallo Rolf B

Das mit dem <br> hast du richtig erkannt. Hat gefehlt, was bewirkte, dass bei kleineren Bildschirmen die AGB-Zeile bereits an der Checkbox began. Zu mindestens war das am iPad so. Jetzt läuft es auch dort zufriedenstellend.

Spätes Dankeschon und Gruss

TooLate

[Matthias Apsel]

Hallo Rolf B,

mach noch ein <br> vor die AGB Zeile.

Alternativ gestalte deine Formularzeilen nach diesem Muster:

Ohne „alternativ“.

Bis demnächst
Matthias