How to make textarea 100% without overflow when padding is present ?
Last Updated :
14 Jan, 2022
If we have given an HTML document containing <textarea> element and its parent element contains some padding then how to make textarea width to 100%. textarea contains.
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%.
HTML Code: The HTML code contains a <textarea> element that holds rows and columns values.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to make 100% tetxarea
without overflowing when
padding is present?
</title>
</head>
<body>
<div class="wrapper">
<textarea cols="30" rows="15"></textarea>
</div>
</body>
</html>
|
CSS Code: The CSS code contains the wrapper class that holds padding, margin, and background-color property. The textarea element contains the width property.
CSS
<style>
.wrapper {
padding: 20px;
margin:15px 0;
background-color: #0f9d58;
}
textarea {
font-size:20px;
width:100%;
}
</style>
|
Complete Code: In this section, we will combine the above two sections to make the width of <textarea> element 100% without overflowing when padding is present.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to make 100% tetxarea
without overflowing when
padding is present?
</title>
<style>
.wrapper {
padding: 20px;
margin: 15px 0;
background-color: #0f9d58;
}
textarea {
font-size: 20px;
width: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<textarea cols="30" rows="15"></textarea>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...