pl: Textarea ignoriert margin (rechts)

problematische Seite

Die <textarea> um die es geht, zeigt sich beim Öffnen einer Nachricht im Forum, s. Problematische Seite. In dieser Area wird eine Nachricht dargestellt, gestrichelt umrandet. Linkerhand passt das margin-Erbe vom Body, rechts wird das ignoriert. Warum? Bitte ma Hinweises.

  1. problematische Seite

    Hallo pl,

    gestrichelt umrandet.

    Kann ich nicht bestätigen.

    Linkerhand passt das margin-Erbe vom Body, rechts wird das ignoriert.

    Die Textarea ist so breit wie das body-Element.

    Bis demnächst
    Matthias

    -- Pantoffeltierchen haben keine Hobbys.
    ¯\_(ツ)_/¯
  2. problematische Seite

    Ein Screenshot macht es deutlich. Links der Rand, rechts kein Rand. MFG

    1. problematische Seite

      Hallo pl,

      Ein Screenshot macht es deutlich. Links der Rand, rechts kein Rand. MFG

      Ach du meinst die Area, die man nicht beschreiben kann. Wäre da nicht

      <output> <pre>

      die passendere Struktur?

      Die Angabe width: 100% greift ins Leere weil 100% von auto auto ist.

      Bis demnächst
      Matthias

      -- Pantoffeltierchen haben keine Hobbys.
      ¯\_(ツ)_/¯
      1. problematische Seite

        Hi,

        <output> <pre>

        die passendere Struktur?

        wozu das pre? Kann man das nicht über CSS regeln? white-space:pre; oder so ähnlich.

        cu,
        Andreas a/k/a MudGuard

    2. problematische Seite

      Aloha ;)

      Ein Screenshot macht es deutlich. Links der Rand, rechts kein Rand. MFG

      Der rechte Rand deiner Textarea liegt bereits im Overflow-Bereich (wie du siehst, wenn du mal dem body ein overflow:hidden mitgibst.

      Das liegt in dem Fall daran, dass die Gesamtbreite deiner Textarea 100%+2em ist. Warum? Weil du die Breite bereits auf 100% festgelegt hast, und dein Padding von je 1em kommt dann auf beiden Seiten noch dazu.

      Zwei Möglichkeiten um das zu verhindern: Die Breite der Textarea auf calc(100% - 2em) festlegen oder direkt mit dem richtigen Box-Modell (box-sizing: border-box) arbeiten.

      Grüße,

      RIDER

      -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

      # Twitter # Steam # YouTube # Self-Wiki #

      Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
      1. problematische Seite

        Verstehe ich nicht.

        1. problematische Seite

          Hallo pl,

          Verstehe ich nicht.

          Was genau verstehst du nicht?

          Bis demnächst
          Matthias

          -- Pantoffeltierchen haben keine Hobbys.
          ¯\_(ツ)_/¯
        2. problematische Seite

          Aloha ;)

          Verstehe ich nicht.

          Ich habe ja nicht wirklich mit Dank gerechnet. Aber zumindest eins der Dinge ausprobieren, die ich dir geschrieben habe, hättest du ja schon können.

          Oder, wenns dann wirklich am Verständnis hapert, nochmal nachhaken und sagen, was genau du nicht verstehst.

          Wenn das deine einzige Reaktion auf eine hilfreiche Antwort ist kann ich wirklich nur den Kopf schütteln…

          Grüße,

          RIDER

          -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

          # Twitter # Steam # YouTube # Self-Wiki #

          Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
        3. problematische Seite

          Verstehe ich nicht.

          Wieso rendert der Browser 100% plus 2em (lt. padding)? Das ergibt überhaupt keinen Sinn, zumal er das nur am rechten Rand macht. Und das padding:1em soll ja nach innen wirken, also für den Text der drinnen steht. Und überhaupt sind 100% eben 100% bezogen auf das Parent-Element <body>.

          1. problematische Seite

            Aloha ;)

            Verstehe ich nicht.

            Wieso rendert der Browser 100% plus 2em (lt. padding)? Das ergibt überhaupt keinen Sinn, zumal er das nur am rechten Rand macht. Und das padding:1em soll ja nach innen wirken, also für den Text der drinnen steht.

            Hättest du den von mir verlinkten Text gelesen, wüsstest du, dass im Standard-Box-Modell die width nur für den Inhalt steht, Padding und Border werden also nicht mit eingeschlossen. Daher ist die tatsächliche Größe der Box eben größer als width, sofern sie padding oder border besitzt. Außer du änderst das angewandte Box-Modell via box-sizing. Warum das nur am rechten Rand geschieht ist genauso klar: weil es dem Standardverhalten entspricht, übergroße Elemente rechts und unten über den verfügbaren Platz ragen zu lassen.

            Aber warum auch lesen was ich dir verlinke?

            Grüße,

            RIDER

            -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

            # Twitter # Steam # YouTube # Self-Wiki #

            Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            1. problematische Seite

              Hallo,

              Aber warum auch lesen was ich dir verlinke?

              Vielleicht hättest du sparsamer beim Verlinken sein müssen, du hast ja schließlich auch Twitter, Steam, YouTube, Self-Wiki und Selfcode verlinkt…

              Gruß
              Kalk

              1. problematische Seite

                Aloha ;)

                Aber warum auch lesen was ich dir verlinke?

                Vielleicht hättest du sparsamer beim Verlinken sein müssen, du hast ja schließlich auch Twitter, Steam, YouTube, Self-Wiki und Selfcode verlinkt…

                Stimmt vielleicht. Woher soll man auch bei dieser blauen Flut wissen, wo man klicken soll?

                Grüße,

                RIDER

                -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

                # Twitter # Steam # YouTube # Self-Wiki #

                Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
          2. problematische Seite

            Na egal. Ich muss ja auch nicht alles verstehen.

            1. problematische Seite

              Aloha ;)

              Na egal. Ich muss ja auch nicht alles verstehen.

              Stimmt. Muss ich auch nicht.

              Grüße,

              RIDER

              -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

              # Twitter # Steam # YouTube # Self-Wiki #

              Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[