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.
<!DOCTYPE html> <html> <head> <title> How to make 100% tetxarea without overflowing when padding is pressent? </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.
<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 <tetxarea> element to 100% without overflowing when padding is pressent.
<!DOCTYPE html> <html> <head> <title> How to make 100% tetxarea without overflowing when padding is pressent? </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:
