Why is my textarea higher up than its neighbor?
Why is my textarea higher up than its neighbor?
It's not.
Let me explain.
First, a bit of background:
Your span
and textarea
elements are (by default) inline elements.
Browsers normally provide a little bit of whitespace underneath inline elements for descenders.
To understand descenders...
Look at this line of text. Notice there are no letters that breach the baseline.
Now look at the following sentence:
By just crossing the bridge he probably got away.
Note the letters "y", "j", "p" and "g". These letters breach the baseline and are known in typography as "descenders".
[
Source: Wikipedia.org
The gap you're seeing is not margin or padding, but simply the browser providing room to accommodate these lowercase letters. In short, this is called baseline alignment.
baseline
The line upon which most letters "sit" and below which descenders extend.
[
Source: Wikipedia.org
So why, somebody might ask, does the browser provide this space for textarea
, img
, input
and other inline elements, that don't need space for descenders?
Because the browser adjusts for the possibility that you may have text before or after one of those elements on the same line.
Now, to your image and code...
On first glance it clearly appears that the textarea
is higher up than the span
element. But if you take a closer look...
...you'll see they are perfectly aligned. Both span
and textarea
are providing space for descenders.
The borders you've added contribute to the appearance of misalignment because the textarea
border wraps a clearly delineated box while excluding descender space, but the span
border wraps the text and the descender space. If you remove the red border the misalignment is less pronounced.
In terms of a solution, here are two options:
- Add
vertical-align: bottom
to thetextarea
rule, OR - Add
display: block
to thetextarea
rule.
How to remove few pixels of whitespace underneath textarea?
It's because the textarea
element's display
is inline-block
by default. As a result, its vertical-align
property is set to baseline
(which is why it isn't aligned as you would expect). The reason there is reserved space at the bottom is for letters such as 'y' or 'j', which hang below adjacent letters/elements.
To resolve this, you can either change the vertical-align
property value to something like top
, or you could change the display
of the textarea
to block
:
Updated Example
textarea {
vertical-align: top;
}
Updated Example
textarea {
display: block;
}
textarea unexplained spacing
Add
vertical-align:bottom
This is because
The baseline of some replaced elements, like
<textarea>
, is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.MDN Reference
span,
textarea {
border: 1px solid black;
margin: 0;
padding: 0;
vertical-align: bottom;
}
<textarea></textarea>
<span>test</span>
How to get rid of space below element inside details element
Add vertical-align: top
to your log class. Space is reserved in inline elements for descender characters, e.g. y, j, g:
details { width: calc(100vw - 20px); box-sizing: border-box; border: 1px solid black; padding: 0;}
.log { width: 100% !important; height: 100%; overflow-y: scroll; box-sizing: border-box; border: none; border-bottom: 1px solid red; outline: none; min-height: 50px; display: inline-block; vertical-align: top;}
<details> <summary>Connection Log</summary> <div class="log" readonly>[08:33:43]: Connection</div></details>
<details> <summary>Connection Log</summary> <textarea class="log" readonly>[08:33:43]: Connection</textarea></details>
Textarea resize
I´m afraid you´ll have to resort to javascript to set the height of your textarea. You can use the scrollHeight
property to determine the total height.
Alternatively you could just use a div
and style the div
to look like a textarea. The div
will grow automatically and as it´s a disabled textarea anyway, you don´t really need it to be a textarea.
Trying to align flex items to bottom, but instead they're aligning to first line of text
you can flex
the images or to the end of long text
.liste {
align-items: flex-end;
}
OR to the center:
align-items: center;
How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)
To disable resizing completely:
textarea {
resize: none;
}
To allow only vertical resizing:
textarea {
resize: vertical;
}
To allow only horizontal resizing:
textarea {
resize: horizontal;
}
Or you can limit size:
textarea {
max-width: 100px;
max-height: 100px;
}
To limit size to parents width and/or height:
textarea {
max-width: 100%;
max-height: 100%;
}
preventing Textarea input after pixel width is reached
You mean something like this in my snippet below?
I used add a keydown
listener in the textarea
when it reaches 920px or more, in this listener I set that only Backspace
and Delete
keys will be allowed, any other key will be ignored with the return false.
(For tests only I limited to 50px instead of 920)
var ellipsisAdded = falsefunction snippet(){ var metaIn = document.getElementById('metaIn'); var metaOut = document.getElementById('metaOut'); metaOut.value = metaIn.value;
var metaOutPix = document.getElementById('metaOutPix'); metaOutPix.value = metaIn.value;
document.getElementById('metaOutPix').innerHTML = document.getElementById('metaIn').value var span1 = $( "span#metaOutPix" ); $( "#metaCountPixel" ).text(span1.innerWidth() + "px / 50px");
var metaNum = metaIn.value var metaCount = metaNum.length; document.getElementById("metaCount").innerHTML = metaCount + " Char";
if (span1.innerWidth() >= 50){ let txtArea = $("#metaIn") txtArea.on("keydown", (ev) => { console.clear() if (ev.key != "Backspace" && ev.key != "Delete"){ console.log("max Pixels reached!"); if (!ellipsisAdded){ ellipsisAdded = true let currentText = txtArea.val() let newTxt = currentText.substring(0, currentText.length - 1) + "..." txtArea.val(newTxt) } return false } }) }else{ $("#metaIn").off("keydown") ellipsisAdded = false; }}
@import url("https://fonts.googleapis.com/css?family=Raleway");html, body { font-family: Raleway, sans-serif; margin: 3px; max-width: 80em; overflow-x: hidden; }
h1 { margin-top: 1em; text-align: center; }
.input-wrap { width: 100%; } .input-wrap h3 { font-size: 20px; text-transform: lowercase; background: #254e61; color: #ffffff; padding: 0.5em; margin: 0; line-height: .2em;} .input-wrap textarea { margin: 0 0 10px 0; width: 100%; height: 5em; resize: none; border: solid 2px #254e61; padding: 5px; font-size: 14px; font-family: arial; } .input-wrap #metaIn { height: 8em; }
#preview { width: 100%; border: solid 2px #5badff; margin-top: 1.5em; } #preview h3 { font-size: 22px; padding: 0.5em; background-color: #5badff; color: #ffffff; margin: 0; line-height: .4em; }
.outputs { padding: 4px; }
#metaOut { border: none; width: 100%; resize: none; overflow: hidden; }
#metaOut, #metaOutPix { font-family: arial, sans-serif; color: #545454; line-height: 20px; font-size: 13px;}#metaOut{ max-width: 460px; height: 100px;}
.countspace{ white-space: nowrap; display: none;}
.countdown { color: white; margin-top: -22px; padding-right: 5px; font-size: 18px; }
#metaCount{ text-align: center;}#metaCountPixel{ text-align: right;}
@media (min-width: 750px) { body, html { width: 80%; margin: auto; } }@media (min-width: 1280px) { .inputs { display: grid; margin-top: 30px; grid-gap: 8px; grid-template-areas: ". tworow" ". tworow"; }
.input-wrap:nth-child(3) { grid-area: tworow; } .input-wrap:nth-child(3) #metaIn { height: 192px !important; }
.input-wrap textarea { margin: 0 0 0 0; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inputs"><div class="input-wrap" id="meta-div"> <h3>Description</h3> <div class="countdown" id="metaCount">0 Char</div> <div class="countdown" id="metaCountPixel">0px / 50px</div> <textarea type="text" name="metaIn" id="metaIn" onkeyup="snippet()" onkeypress="snippet()" maxlength="320" onkeyup="displayTextWidth()"></textarea></div></div>
<div id="preview"> <h3>Snippet Preview</h3> <div class="outputs"> <textarea type="text" name="metaOut" id="metaOut" placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsum voluptatem nemo reiciendis asperiores accusamus suscipit aliquid eveniet quo vero." readonly></textarea> <span class="countspace" id="metaOutPix"></span> </div></div>
Styling max-width for text area wrapper overlap the relative element
The max-width
constraint need to be applied to the textarea and not the div element
.wrapper {
max-width: 500px;
display: flex;
}
.text-area-element {
width: 250px;
}
.text-area-element textarea {
max-width:100%;
box-sizing:border-box;
}
<div class="wrapper">
<div class="text-area-element">
<textarea></textarea>
</div>
<div>
<button>
BUTTON
</button>
</div>
</div>
Related Topics
CSS Float: Floating an Image to the Left of the Text
Should Global CSS Styles Be Set on the HTML Element or the Body Element
Send HTML Mail Using Android Intent
:Nth-Child(Even/Odd) Selector with Class
An 'Ul' Element Can Never Be a Child of a 'P' Element
How to Make an Element's Background-Color a Little Darker Using CSS
How to Change the Length/Position of Text-Decoration:Underline
How to Show Split Header in the Material Table Having Nested Group of Data in Angular
How Does the Vertical-Align Property Work
Make Div's Height Expand with Its Content
How to Allow <Input Type="File"> to Accept Only Image Files
How to Stop 100% Width Text Boxes from Extending Beyond Their Containers
How to Fit an Image (Img) Inside a Div and Keep the Aspect Ratio