How to fix Textarea Auto-Grow inside an Accordian

Question

DESCRIPTION

Using stock jquery mobile options.

The textarea auto-grow script does not auto-grow when it is:

a) Inside a fieldset accordain AND

b) Has content inside on page load.

THE BROKEN CODE

    <div data-role="fieldcontain">
      <label for="ta2">Broken:</label>
      <textarea id="ta2" name="ta2" cols="40" rows="4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi augue, tristique non orci non, interdum ultrices enim. Donec est erat, eleifend euismod tortor vel, feugiat egestas magna.
      </textarea>
    </div>

SEE THE PROBLEM: http://jsfiddle.net/epLaT/4/

Answer 1

The height is not adjusted because at creation time, the textarea is invisible (because it is in a collapsed container) and therefore height calculations which rely on the visible height cannot be applied.

The solution is to manually call the height adjustment once the textarea becomes visible. I forked your fiddle to demonstrate the solution. The relevant change is to listen for the expand event of the container (this is where the textarea becomes visible) and then to trigger the height calculation by simulating a key press:

$('fieldset').on("collapsibleexpand", function(event, ui) { //Listen for the event
    $(this).find("textarea").keyup(); //simulate key press
});