zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Scrollbalken von textarea dehnt sich über die innere Box des Elternelementes aus

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.03.2018, 13:32
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard Scrollbalken von textarea dehnt sich über die innere Box des Elternelementes aus

Moin.

Gegeben sei:

HTML-Code:
<main>
<form>
	<label>...</label>
	<textarea></textarea>	
</form>
</main>


main {
	max-width: 24em;
	padding: 1em;
	background: red;
}
textarea, label {
	width: 100%;
	display: block;
}
textarea {
	height: 10em;
} 
label{
  background: green;
}
https://codepen.io/fermion/pen/BrQYqe

Mit diesem Code ragt der Scrollbalken über die innere Box von main hinaus, in das Padding hinein.
Den Scrollbalken sieht man, sobald man einige Zeilen Text in das Feld eingegeben hat.

Gefunden habe ich zum Thema:
https://stackoverflow.com/questions/...-div-element-g

Hat leider nicht geholfen.

Wie verhindert ihr die Ausdehnung von textarea über die Grenzen der inneren Box des Elternelementes, wobei textarea die volle Breite der inneren Box einnehmen soll.
In anderen Worten: der Scrollbalken soll sich innerhalb und nicht außerhalb der inneren Box befinden.

Danke.

P.S.:
Weil sich dafür kein Thread lohnt.

Wie zeichnet man korrekt ein label für ein form aus?

Das Beispiel von Selfhtml, validiert nicht.
HTML/Formulare/form – SELFHTML-Wiki
HTML-Code:
<form action="senden.html" id="person"> 
<label class="h2" form="person">Namenseingabe</label>
Danke.
__________________


Geändert von AndreasB (19.03.2018 um 08:59 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.03.2018, 05:59
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Ich glaube ich verstehe das nicht ganz.
Das Textarea soll nicht grösser werden als der roten Kasten?
Und was für Scrollbalken meinst du da.
https://codepen.io/basti1012/pen/zWoPwW
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.03.2018, 08:42
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

Guten Morgen.

Du erkennst das Hinausragen von textarea leichter in einem Beispiel, wo das Nachbarelement eingefärbt ist:
https://codepen.io/fermion/pen/BrQYqe
Den Scrollbalken sieht man, sobald man einige Zeilen Text in das Feld eingegeben hat.
__________________


Geändert von AndreasB (19.03.2018 um 08:59 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 19.03.2018, 09:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Die Ursache sind das padding und border von textarea. Dem kann auf verschiedene Arten Abhilfe geschaffen werden:

Entweder du setzt padding und border auf Null

Oder du weist textarea box-sizing: border-box zu.

Am aktuellsten wäre eine Lösung mit Flexbox.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 19.03.2018, 09:31
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@MrMurphy

Ganz herzlichen Dank

box-sizing: border-box

funktioniert.

textarea { border-width: 0; padding: 0; }

hat dagegen keinerlei Einfluss auf das Problem.


Aus Neugier: welchen Sinn seht ihr im Defaultverhalten des Browsers, textarea hinausragen zu lassen?
__________________


Geändert von AndreasB (19.03.2018 um 09:39 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 19.03.2018, 09:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Für dein textarea-problem habe ich leider keine wirkliche Lösung.


Bezüglich des form-attribut: Das wird wohl (noch) nicht validiert, soweit ich das sehe ist das auch eher dazu gedacht, Elemente auszuzeichnen, die nicht in einem form-Tag stehen.
Zum strukturieren eines formulars halte ich mich eher daran:
https://developer.mozilla.org/en-US/...e_an_HTML_form (selfhtml ist halt auch nur ein wiki und leider nicht immer 100%ig korrekt. Auch wenn ich es sehr oft und gerne verwendet habe)

Edit: Danke für den Hinweis mit box-sizing Murphy. Daran habe ich in aller frühe nicht gedacht
Ich habe nur etwas mit flexbox probiert und bin nicht wirklich auf eine gute Lösung gekommen (wohl auch, weil box-sizing gefehlt hat)

Geändert von cloned (19.03.2018 um 09:44 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 19.03.2018, 09:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
hat dagegen keinerlei Einfluss auf das Problem
Doch.

Gruss

MrMurphy
Mit Zitat antworten
  #8 (permalink)  
Alt 19.03.2018, 09:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
Aus Neugier: welchen Sinn seht ihr im Defaultverhalten des Browsers, textarea hinausragen zu lassen?
Das ist der falsche Denkansatz. Der Browser sagt nicht: Da ist eine textarea, die lasse ich herausragen. Der Browser sagt: Hier ist der Platz den der Inhalt einnimmt, das ist die Breite/Höhe die durch CSS vorgegeben ist, außen rundherum kommen dann border/scrollbalken/sonstiges. Einfach deshalb, damit sichergestellt wird, dass der Inhalt sichtbar ist.
https://drafts.csswg.org/css-ui-3/#box-sizing Hier kannst du dir die Schritte durchlesen, welche der Browser (laut Spezifikation) durchführt um die Größe eines Elements zu bestimmen.
Mit Zitat antworten
  #9 (permalink)  
Alt 19.03.2018, 09:51
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.391
AndreasB wird schon bald berühmt werden
Standard

@MrMurphy
Du hast völlig Recht, Verzeihung bitte, da war ich zu schnell im Ausprobieren.

Aber padding: 0 ist für textarea keine Option, das sähe hässlich für den Anwender aus.

https://codepen.io/fermion/pen/mxOLWO

Wie auch immer die Lösung mit
box-sizing: border-box;
funktioniert ja.

@cloned
Danke für den Link zu box-sizing.

Ich kann mir im Moment keinen Usecase vorstellen, wo man möchte, dass sich textarea in das Padding des Elternelement hinein ausdehnt.

Wie auch immer, ich habe die Defaults hinzunehmen.
__________________


Geändert von AndreasB (19.03.2018 um 09:56 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.03.2018, 10:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
@cloned
Danke für den Link zu box-sizing.

Ich kann mir im Moment keinen Usecase vorstellen, wo man möchte, dass sich textarea in das Padding des Elternelement hinein ausdehnt.
Nocheinmal: Das ist der falsche Denkansatz. Es geht hier nicht darum, dass bei textarea das padding in das Elternelement hineinragt. Sondern darum, dass der Browser eigene Berechnungen anstellt, wie groß ein Element ist.
Bei textarea hat wohl der input Vorrang und wird auf keinen Fall abgeschnitten.
Aber ich kann dir sagen, dass du in keinem Browser einen Code finden wirst wie: if (element === "textarea") { makeElementBigger() }
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div Box mit Scrollbalken vertical, Hilfeee! brainson CSS 4 30.11.2006 14:57
DIV Box in der mitte des Browserfensters grazioli CSS 1 15.11.2006 22:27
Kniffliges Layout mit float Roadrunnerle CSS 6 14.03.2006 12:26
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 18:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 18:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:17 Uhr.