title: jQuery Mobile textarea resizing issue
body: <p>I have a textarea element which sits in the footer of the page (to emulate the native compose box for messages in iOS). As text is entered, it grows or shrinks accordingly. The height of this element seems to be computed to 52px. </p>
  
  <p>I would like the height to be smaller. However, setting the initial height (without important) simply gets overwritten by 52px. Setting the initial height to around 35px (with important) disables the auto-grow feature and a scroll bar appears instead. I've played around with the web inspector, but I can't seem to figure out where this 52px is being computed from.</p>
  
  <p>What is the solution to this problem? The code is pretty straight forward. I am working with jQuery 1.10.2 and jQuery Mobile 1.4.0. </p>
  
  <p><code>HTML</code></p>
  
  <pre><code>&lt;div data-role="footer" data-theme="a" data-position="fixed" data-tap-toggle="false" class="custom-footer"&gt;
          &lt;div class="group-footer"&gt;
              &lt;div class="map-icon"&gt;
                  &lt;img src="assets/compose-action-arrow@2x.png" style="width: 25px;height: 25px;" /&gt;
              &lt;/div&gt;
              &lt;div class="text-box"&gt;
                  &lt;textarea name="textarea" class="define-textarea" id="inbox-continue-conversation"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
              &lt;div class="send-link"&gt;&lt;a href="#" id="inbox-continue-answer-button"&gt;Send&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><code>CSS</code></p>
  
  <pre><code>.define-textarea {
  font-size: 1em !important;
  border-color: #cccccc !important;
  border-radius: 5px;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/V4X5t.png" alt="Height is 52px. Ideally, I would like it to be around 35px.">
    <img src="https://i.stack.imgur.com/vsV0f.png" alt="The auto-grow feature should look like this."></p>