How can I make a TextArea 100% width without overflowing when padding is present in CSS?
Why not forget the hacks and just do it with CSS?
One I use frequently:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
See browser support here.
How to expand textarea width to 100% of parent (or how to expand any HTML element to 100% of parent width)?
<div> <div style="width: 20%; float: left;"> <p>Some Contentsssssssssss</p> </div> <div style="float: left; width: 80%;"> <textarea style="width: 100%; max-width: 100%;"></textarea> </div> <div style="clear: both;"></div></div>
How to set textarea to 100% width and height?
The issue is the common white space issue of inline-block
/inline
element due to vertical alignment. If you check dev tools of google you will see this:
So to fix it you simply need to adjust vertical alignment or make the textarea a block element (like provided in the other answers):
html, body, textarea { margin: 0; padding: 0; border: 0; width: 100%; height: 100%;}textarea { vertical-align:top;}
<textarea>Text goes here</textarea>
How to prevent textarea content from overflowing into padding?
I could not find a way of doing it with padding but the same sort of effect can be achieved by setting the top border of the textarea instead of the padding:
body {
background: grey;
}
textarea {
width: 100%;
margin: 0;
border-top-width: 1em;
border-top-color: white;
resize: none;
}
<body>
<textarea name="" id="" cols="30" rows="4"></textarea>
</body>
Textarea to fill a parent container exactly, with padding
Use width: 100%; height: 100%;
to make the <textarea>
fill up the wrapping <div>
. Unfortunately, you won't be able to put on margins/padding, as they get ADDED to the 100%, so the right/bottom edges will overflow.
Edit: To use width: 100%;
along with padding, you can change the box sizing model:
width: 100%;
height: 100%;
box-sizing: border-box;
With this change, 100%
now refers to the distance between the outsides of the borders, instead of the distance between the outside of the content.
Textarea doesn't stretch when parent has max-height and overflow scroll
It happens because of the display: flex
. you can simply wrap the text area inside an element:
.a {
display: flex;
flex-direction: column;
width: 400px;
max-height: 70px;
overflow-y: scroll;
border: 1px solid red;
}
textarea{
width:100%;
box-sizing: border-box; /* for 100% width https://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present */
}
<div class="a">
<div class><textarea></textarea></div>
<button>Save</button>
</div>
Share the width for menu items with equal padding using CSS
Use this style (everything is dynamic here) -
CSS (modified) -
ul {
width: 600px;
display: flex;
list-style: none;
padding: 0px;
border: solid 1px blue;
}
li {
flex: auto;
text-align: center;
padding: 8px 0;
}
li:hover {
background: blue;
color: white;
cursor: pointer;
}
HTML (no change) -
<ul>
<li>
Test
</li>
<li>
Test Very Very Large Bigger Item
</li>
<li>
Test Bigger item
</li>
</ul>
Working demo here
span padding with width 100% causing unexpected behaviour
It's because of padding. your width is 100% plus padding. To prevent it use box-sizing property.
#parent {
border: 3px solid;
}
span {
background-color: green;
display: block;
padding: 1rem;
width: 100%;
box-sizing: border-box;
}
<div style="width: 30rem" id="parent">
<span>
Span
</span>
</div>
Related Topics
I Can't Get My Font-Awesome Icons to Show Up. Tried Importing CSS with Multiple Methods
Using .Otf Fonts on Web Browsers
Why Are Dashes Preferred for CSS Selectors/HTML Attributes
Form Inline Inside a Form Horizontal in Twitter Bootstrap
How to Remove Focus Around Buttons on Click
Remove Blur Effect on Child Element
Fallback for CSS Attributes Without Unit
Manipulating External Svg File Style Properties with CSS
Making a Div That Covers the Entire Page
Equal Sized Table Cells to Fill the Entire Width of the Containing Table
How to Align Entire HTML Body to the Center
iOS 11 Safari Bootstrap Modal Text Area Outside of Cursor
What Replaces Cellpadding, Cellspacing, Valign, and Align in HTML5 Tables
How to Set a Stroke-Width:1 on Only Certain Sides of Svg Shapes