title: Text Area row and column size inconsistency in Chrome and Firefox
body: <p>I have been using razor to generate two text areas,</p>
  
  <pre><code>@Html.TextAreaFor(model =&gt; model.Description, new { autocomplete = "off", @cols = 25, @rows = 1, disabled = "disabled" })
  
  @Html.TextAreaFor(model =&gt; model.Narration, new { autocomplete = "off", @cols = 25, @rows = 1 }),
  </code></pre>
  
  <p>resulting in the html as below,</p>
  
  <pre><code>&lt;textarea autocomplete="off" cols="25" data-val="true" data-val-maxlength="The field Description must be a string or array type with a maximum length of '400'." data-val-maxlength-max="400" data-val-required="The Description field is required." disabled="disabled" id="Description" name="Description" rows="1"&gt;acknowledgement description&lt;/textarea&gt;
  
  &lt;textarea autocomplete="off" cols="25" id="Narration" name="Narration" rows="1"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>the generated html code from the razor is identical both in Chrome and Firefox, but the sizes of the text area are different ( <code>167x17 px - Chrome , 204.667×36.15 px in Firefox</code> )</p>
  
  <p><a href="https://i.stack.imgur.com/z2Ca1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z2Ca1.png" alt="This is how it looks on the browser"></a></p>
  
  <p>is there any method to fix this issue or something missing in my code?</p>