|
||||
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; } 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>
__________________
Geändert von AndreasB (19.03.2018 um 08:59 Uhr) |
Sponsored Links |
|
||||
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 |
Sponsored Links |
|
||||
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) |
|
|||
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 |
|
|||
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) |
|
|||
Zitat:
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. |
|
||||
@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) |
Sponsored Links |
|
|||
Zitat:
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() } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |