How to make textarea 100% without overflow when padding is present ?
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:
Please Login to comment...