Menu
Given the following CSS
.comment {
margin: 10px;
display: block;
overflow: auto;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
-webkit-box-shadow: rgba(0, 0, 0, .2) 1px 1px 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
min-height: 200px;
width: 100%
}
This is applied to a textarea but the right margin is ignored and the textarea goes off the screen.
why is this?
421
The idea is to create a div with the class name “wrapper”. Inside that <div> element, we create a text area with a certain number of columns and rows. In this case, it is 30 and 15 respectively. After that, we set the width property to 100% to make a textarea width 100%.
To prevent a text field from being resized, you can use the CSS resize property with its "none" value. After it you can use the height and width properties to define a fixed height and width for your <textarea> element.
to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following. This tells the browser to account for any border and padding in the values you specify for an element's width and height.
By setting the width to 100% and a margin of 10px the textarea will be a 100% width of it's container shifted down and to the left 10px
To get your desired result you'll probably need to use a container around the textarea with a 10px padding.
See example.
so something like:
<div class="comment-container">
<textarea class="commentA"></textarea>
</div>
and
.comment-container {
padding:10px;
}
.commentA {
width:100%;
min-height: 200px;
}
to get started.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
