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

          -- https://wwwtech.de/about
  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