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: