tag:forum.selfhtml.org,2005:/selfTextarea ignoriert margin (rechts) – SELFHTML-Forum2019-05-12T18:13:45Zhttps://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748517#m1748517pl2019-05-12T08:34:28Z2019-05-12T08:34:28ZTextarea 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#m1748522Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2019-05-12T09:11:52Z2019-05-12T09:11:52ZTextarea 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#m1748524pl2019-05-12T09:24:53Z2019-05-12T09:25:40ZTextarea 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#m1748531Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2019-05-12T09:41:57Z2019-05-12T09:41:57ZTextarea 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#m1748533Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-05-12T09:46:39Z2019-05-12T09:46:39ZTextarea 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#m1748540MudGuardhttp://www.andreas-waechter.de/2019-05-12T10:45:43Z2019-05-12T10:45:43ZTextarea 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#m1748549pl2019-05-12T15:30:00Z2019-05-12T15:30:00ZTextarea ignoriert margin (rechts)<p>Verstehe ich nicht.</p>
https://forum.selfhtml.org/self/2019/may/12/textarea-ignoriert-margin-rechts/1748551#m1748551Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2019-05-12T15:32:18Z2019-05-12T15:32:18ZTextarea 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#m1748552Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-05-12T17:07:55Z2019-05-12T17:07:55ZTextarea 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#m1748557pl2019-05-12T17:25:42Z2019-05-12T17:28:18ZTextarea 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#m1748558Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-05-12T17:30:37Z2019-05-12T17:31:25ZTextarea 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#m1748561pl2019-05-12T17:37:33Z2019-05-12T17:37:33ZTextarea 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#m1748559Tabellenkalk2019-05-12T17:34:02Z2019-05-12T17:34:02ZTextarea 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#m1748560Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-05-12T17:35:21Z2019-05-12T17:35:21ZTextarea 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#m1748563Camping_RIDERjanosch.zoller@selfhtml.orghttp://www.campingrider.de2019-05-12T18:13:45Z2019-05-12T18:13:45ZTextarea 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>