Linuchs: CSS Boxmodell

problematische Seite

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

  1. problematische Seite

    @@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 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. problematische Seite

      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

      1. problematische Seite

        @@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 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo Gunnar,

          […] Shodow-DOM.

          😂 made my day

          LG,
          CK

  2. problematische Seite

    Hallo Linuchs,

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

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

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. problematische Seite

      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

      1. problematische Seite

        @@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 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. problematische Seite

          Hallo Gunnar,

          ist denn <style> jetzt im Body erlaubt?

          Gruß
          Jürgen

          1. problematische Seite

            @@JürgenB

            ist denn <style> jetzt im Body erlaubt?

            Ja.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. problematische Seite

              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