CSS Boxmodell

[Linuchs]

Liebe Self-ler,

ich entwerfe ein Formular. Innerhalb der Box Angaben zum Chor mit ihrem padding sollen die input-Felder hineinpassen.

Jedoch die Angabe width:100% geht über den Rahmen hinaus.

  <div id="sender">
  <style scoped>
    #sender {
      order: 2;
      width: 48%;
      box-sizing: border-box;
    }
    #sender p {
      color: #888;
    }
  </style>

<input
required
type        = "text"
name        = "chor_name"
maxlength   = "30"
style       = "width:100%"
value       = ""
placeholder = "Shanty-Chor"

>

Wo ist der Fehler?

Gruß, Linuchs

[Gunnar Bittersmann]

@@Linuchs

Jedoch die Angabe width:100% geht über den Rahmen hinaus.

Wo ist der Fehler?

box-sizing Vererbt: Nein [MDN]

Für das input-Element gilt also der Defaultwert content-box.

LLAP 🖖

[Linuchs]

box-sizing Vererbt: Nein [MDN]

Okay, böser Verständnis-Fehler. Sonst ist eine "Box" doch der Karton und nicht der Inhalt. Siehe die endlosen Videos "unboxing".

Aber danke, jetzt funzt es.

Linuchs

[Gunnar Bittersmann]

@@Linuchs

Sonst ist eine "Box" doch der Karton und nicht der Inhalt.

Eine Box kann Inhalt einer anderen und Karton für andere sein, z.B. Matrjoschka, Flexbox.

Ein input-Element ist Karton für seine Inhalte im Shodow-DOM.

Aber danke, jetzt funzt es.

Üblicherweise will man dasselbe Boxmodell für alle Elemente (und Pseudoelemente!) angeben:

*, ::before, ::after { box-sizing: border-box }

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

[…] Shodow-DOM.

😂 made my day

LG,
CK

[Matthias Apsel]

Hallo Linuchs,

  <div id="sender">
  <style scoped>

  </style>

Das scoped kann dir böse auf die Füße fallen.

Bis demnächst
Matthias

[Linuchs]

Hallo Matthias,

Das scoped kann dir böse auf die Füße fallen.

Deshalb gebe ich dem Container sicherheitshalber eine id und setze #id vor die CSS-Angaben.

  <div id="sender">
  <style scoped>
    #sender {
      order: 2;
      width: 48%;
      box-sizing: border-box;
    }
    #sender p {
      color: #888;
    }
  </style>
  ... 
  </div>

Linuchs

[Gunnar Bittersmann]

@@Linuchs

Das scoped kann dir böse auf die Füße fallen.

Deshalb gebe ich dem Container sicherheitshalber eine id und setze #id vor die CSS-Angaben.

Warum hast du das scoped-Attribut überhaupt drin, wo es doch aus dem Standard raus ist?

LLAP 🖖

[JürgenB]

Hallo Gunnar,

ist denn <style> jetzt im Body erlaubt?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

ist denn <style> jetzt im Body erlaubt?

Ja.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

danke.

ist denn <style> jetzt im Body erlaubt?

Ja.

das macht es für die, die meinen GPX-Viewer in CMSen einsetzen, deutlich einfacher.

Gruß
Jürgen