html </div> </div> </div> </div> <div class="header-top clr"> <div class="clr container" id="site-header-inner"> <div class="left clr"> <div class="inner"> <div class="clr" id="site-navigation-wrap"> <nav class="navigation main-navigation clr" id="site-navigation" itemscope="itemscope" > <ul class="main-menu dropdown-menu sf-menu" id="menu-film"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-7" id="menu-item-7"><a class="menu-link" href="#"><span class="text-wrap">HOME</span></a></li><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49" id="menu-item-49"><a class="menu-link" href="#"><span class="text-wrap">PORTFOLIO</span></a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46" id="menu-item-46"><a class="menu-link" href="#"><span class="text-wrap">CONTACTS</span></a></li></ul> </nav> </div> </div> </div> </div> </div> </header> <main class="site-main clr" id="main"> textarea controls are useful to collect or edit long runs of text like messages, files' contents, lists, reviews, articles, etc.. In your case you want to fix the <textarea> size when the parent does not have a fixed size. textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } View Demo Setting the box-sizing to border-box allows the textarea to respect its parent container's padding and border, recalculating what 100% actually means. maxlength: number: Specifies the maximum number of characters in textarea. Html Attributes of Html.TextArea TextArea is a multiline text input control that can accept a large number of string lines. Add this piece of code to your textarea style: The control associated to this field is a text box that allows users to edit multiple lines of plain text. We will use the following Student model class … By default, text in a <textarea> is rendered in a monospace or fixed-width font, and text areas are most often used within a parent <form> element. width: 100px; !DOCTYPE html > html > style > #demo { resize: both; overflow: auto; width: 100%; } /style > body > form > textarea id= "demo" rows= "6" cols= "50" > This textarea has covered 100% width. textarea {. If you want to increase the element width, you can do it by . How to control the textarea resizing with CSS3¶ In this article, we are going to learn how to make the HTML <textarea> element have a fixed, unchangeable size. div { border:1px solid red; padding:5px; } textarea { width:100%; border:1px solid blue } Admittedly the gap on the right is smaller so it doesn’t look perfect. placeholder : text: Specifies a short hint of the value in textarea. For default the text area is re sizable. That <span> will naturally grow to be the width it needs to be for the content it contains. Now you can use height and width property to provide a fixed height and width to the element. The content of this element represents the initial value of the control. Some developers also use cols and rows css property to provide textarea size. Specifies the visible width of a text area: dirname: textareaname.dir: Specifies that the text direction of the textarea will be submitted: disabled: disabled: Specifies that a text area should be disabled: form: form_id: Specifies one or more forms the text area belongs to: maxlength: number: Specifies the maximum number of characters allowed in the text area: name: text readonly: readonly Description. The <textarea> element is used to create a text input area of unlimited length. By default, it creates a textarea with rows=2 and cols=20. form: form_id: Specifies one or more forms. <textarea cols="num" rows="num">. The HtmlHelper class includes two extension methods to render multi-line HTML control in a razor view: TextArea () and TextAreaFor<TModel, TProperty> (). /form > … We can make any element editable and input-like with the contenteditable attribute: 99 . HTML Content here CSS max-width: 300px; max-height:300px Demo on jsfiddle. The textarea element represents a field for multi-line text input. Usually, size of TextArea is divided into rows and column and you can set it according to your needs. name: text: Assigns a name to the input control. To prevent a text field from being resized, you can use the CSS resize property with its "none" value. Using width: 100% I added the following line to your javascript function, setting the width of div to the width of the textArea element prior to resizing the height of the textArea: divHidden.style.width = element.getBoundingClientRect().width + ‘px’; Specifies the width of the textarea based on the number of visible character widths.