tag:forum.selfhtml.org,2005:/self Textarea ignoriert margin (rechts) – SELFHTML-Forum 2019-05-12T18:13:45Z https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748517#m1748517 pl 2019-05-12T08:34:28Z 2019-05-12T08:34:28Z Textarea ignoriert margin (rechts) <p>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.</p> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748522#m1748522 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-05-12T09:11:52Z 2019-05-12T09:11:52Z Textarea ignoriert margin (rechts) <p>Hallo pl,</p> <blockquote> <p>gestrichelt umrandet.</p> </blockquote> <p>Kann ich nicht bestätigen.</p> <blockquote> <p>Linkerhand passt das margin-Erbe vom Body, rechts wird das ignoriert.</p> </blockquote> <p>Die Textarea ist so breit wie das body-Element.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748524#m1748524 pl 2019-05-12T09:24:53Z 2019-05-12T09:25:40Z Textarea ignoriert margin (rechts) <p>Ein <a href="https://rolfrost.de/astro/textarea.gif" rel="nofollow noopener noreferrer">Screenshot</a> macht es deutlich. Links der Rand, rechts kein Rand. MFG</p> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748531#m1748531 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-05-12T09:41:57Z 2019-05-12T09:41:57Z Textarea ignoriert margin (rechts) <p>Hallo pl,</p> <blockquote> <p>Ein <a href="https://rolfrost.de/astro/textarea.gif" rel="nofollow noopener noreferrer">Screenshot</a> macht es deutlich. Links der Rand, rechts kein Rand. MFG</p> </blockquote> <p>Ach du meinst die Area, die man nicht beschreiben kann. Wäre da nicht</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span> </code></pre> <p>die passendere Struktur?</p> <p>Die Angabe <code>width: 100%</code> greift ins Leere weil 100% von <code>auto</code> <code>auto</code> ist.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748533#m1748533 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-05-12T09:46:39Z 2019-05-12T09:46:39Z Textarea ignoriert margin (rechts) <p>Aloha ;)</p> <blockquote> <p>Ein <a href="https://rolfrost.de/astro/textarea.gif" rel="nofollow noopener noreferrer">Screenshot</a> macht es deutlich. Links der Rand, rechts kein Rand. MFG</p> </blockquote> <p>Der rechte Rand deiner Textarea liegt bereits im Overflow-Bereich (wie du siehst, wenn du mal dem body ein <code>overflow:hidden</code> mitgibst.</p> <p>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.</p> <p>Zwei Möglichkeiten um das zu verhindern: Die Breite der Textarea auf <code>calc(100% - 2em)</code> festlegen oder direkt mit dem <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing" rel="nofollow noopener noreferrer">richtigen Box-Modell</a> (<code>box-sizing: border-box</code>) arbeiten.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748540#m1748540 MudGuard http://www.andreas-waechter.de/ 2019-05-12T10:45:43Z 2019-05-12T10:45:43Z Textarea ignoriert margin (rechts) <p>Hi,</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span> </code></pre> <p>die passendere Struktur?</p> </blockquote> <p>wozu das pre? Kann man das nicht über CSS regeln? <code>white-space:pre;</code> oder so ähnlich.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748549#m1748549 pl 2019-05-12T15:30:00Z 2019-05-12T15:30:00Z Textarea ignoriert margin (rechts) <p>Verstehe ich nicht.</p> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748551#m1748551 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-05-12T15:32:18Z 2019-05-12T15:32:18Z Textarea ignoriert margin (rechts) <p>Hallo pl,</p> <blockquote> <p>Verstehe ich nicht.</p> </blockquote> <p>Was genau verstehst du nicht?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748552#m1748552 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-05-12T17:07:55Z 2019-05-12T17:07:55Z Textarea ignoriert margin (rechts) <p>Aloha ;)</p> <blockquote> <p>Verstehe ich nicht.</p> </blockquote> <p>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.</p> <p>Oder, wenns dann wirklich am Verständnis hapert, nochmal nachhaken und sagen, was genau du nicht verstehst.</p> <p>Wenn das deine einzige Reaktion auf eine hilfreiche Antwort ist kann ich wirklich nur den Kopf schütteln…</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748557#m1748557 pl 2019-05-12T17:25:42Z 2019-05-12T17:28:18Z Textarea ignoriert margin (rechts) <blockquote> <p>Verstehe ich nicht.</p> </blockquote> <p>Wieso rendert der Browser 100% plus 2em (lt. padding)? Das ergibt überhaupt keinen Sinn, zumal er das nur am rechten Rand macht. Und das <code>padding:1em</code> 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>.</p> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748558#m1748558 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-05-12T17:30:37Z 2019-05-12T17:31:25Z Textarea ignoriert margin (rechts) <p>Aloha ;)</p> <blockquote> <blockquote> <p>Verstehe ich nicht.</p> </blockquote> <p>Wieso rendert der Browser 100% plus 2em (lt. padding)? Das ergibt überhaupt keinen Sinn, zumal er das nur am rechten Rand macht. Und das <code>padding:1em</code> soll ja nach innen wirken, also für den Text der drinnen steht.</p> </blockquote> <p>Hättest du den von mir verlinkten Text gelesen, wüsstest du, dass im Standard-Box-Modell die <em>width</em> 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 <em>box-sizing</em>. 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.</p> <p>Aber warum auch lesen was ich dir verlinke?</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748561#m1748561 pl 2019-05-12T17:37:33Z 2019-05-12T17:37:33Z Textarea ignoriert margin (rechts) <p>Na egal. Ich muss ja auch nicht alles verstehen.</p> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748559#m1748559 Tabellenkalk 2019-05-12T17:34:02Z 2019-05-12T17:34:02Z Textarea ignoriert margin (rechts) <p>Hallo,</p> <blockquote> <p>Aber warum auch lesen was ich dir verlinke?</p> </blockquote> <p>Vielleicht hättest du sparsamer beim Verlinken sein müssen, du hast ja schließlich auch Twitter, Steam, YouTube, Self-Wiki und Selfcode verlinkt…</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748560#m1748560 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-05-12T17:35:21Z 2019-05-12T17:35:21Z Textarea ignoriert margin (rechts) <p>Aloha ;)</p> <blockquote> <blockquote> <p>Aber warum auch lesen was ich dir verlinke?</p> </blockquote> <p>Vielleicht hättest du sparsamer beim Verlinken sein müssen, du hast ja schließlich auch Twitter, Steam, YouTube, Self-Wiki und Selfcode verlinkt…</p> </blockquote> <p>Stimmt vielleicht. Woher soll man auch bei dieser blauen Flut wissen, wo man klicken soll?</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748563#m1748563 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2019-05-12T18:13:45Z 2019-05-12T18:13:45Z Textarea ignoriert margin (rechts) <p>Aloha ;)</p> <blockquote> <p>Na egal. Ich muss ja auch nicht alles verstehen.</p> </blockquote> <p>Stimmt. Muss ich auch nicht.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div>