title: Textarea in read only state text display is not full
body: <p>problem
  <img src="https://i.stack.imgur.com/p5qfi.png" alt="problem" />
  normal
  <img src="https://i.stack.imgur.com/K6glf.png" alt="normal" /></p>
  <p>html</p>
  <pre><code>&lt;textarea id=&quot;dataForm:DESCRIBE&quot; name=&quot;dataForm:DESCRIBE&quot;  
  style=&quot;width:100% !important;height:120px !important; overflow: visible !important;&quot;&gt;&lt;/textarea&gt; 
  </code></pre>
  <p>css:</p>
  <pre><code>textarea {
      width: 100%;
      height: 48px;
      border: 1px solid #ddd; 
  }
  </code></pre>
  <p>js code (textarea is readonly):</p>
  <pre><code>if (value==true&amp;&amp;(otype==&quot;text&quot;||otype==&quot;textarea&quot;||otype==&quot;select-one&quot;)){
    $(name).readOnly = true;
    $(name).onclick  = &quot;&quot;;
    $(name).style.background=&quot;#F4F4F4&quot;;
    if (otype==&quot;select-one&quot;){
      $(name).disabled = value;
    }
  }
  else{
    $(name).disabled = value;
  }
  </code></pre>
  <p>We try to mark height !important,but it does't work. If delete css style</p>
  <pre><code>{ 
   width: 100%; 
   height: 48px;   
   border: 1px solid #ddd; 
  }
  </code></pre>
  <p>It works but style  is Browser  default.</p>
  <p>my local service  web page have no problem, but the production environment of the web service is not normal .for some reason,I can't debug the production environment by myself.</p>