Textarea doesn't AutoGrow height with pre-filled values in a collapsible

[gillespasse]

When I open a form with textArea that have already values, they do not autoGrow, I have to set focus on the textArea and then press enter, then it autoGrows.

[toddparker]

What device/OS is this on?

[phoobahr]

I can confirm this behavior on both an ipad and a 4gen touch both running 4.2.1

[idrinkmusic]

I also can confirm that this is an issue. I tested this using the alpha 2 on: Chrome 7.0.517.44, Safari 5.0.3, Firefox 3.6.12, and Milestone built-in browser.

[ghost]

Will there be a way in future releases to disable autogrow?

[roark31337]

I just submitted a fix for this issue. When the page loads the textArea will be resized to fit any default text that has been provided (without any transition effects so it just 'appears' correct).

I was able to test this on an iPhone4 and an iPod 4gen.

Here is the pull request fwiw:
#872

I hope this helps! Let me know if you see any issues.

[tommedema]

Note that a related issue is that a textarea does not shrink in size when text is removed (#2651 (comment)).

[toddparker]

Thanks, looking at this now.

_t

On Oct 11, 2011, at 11:24 AM | October 11, 2011, tommedema wrote:

Note that a related issue is that a textarea does not shrink in size when text is removed (#2651 (comment)).

Reply to this email directly or view it on GitHub:
#509 (comment)

[toddparker]

This issue is now fixed. It can sometimes get a bit tripped up, but it expands when pre-populated.

[Mark-H]

I notice this fix doesn't work when a prefilled textarea is in a collapsible element. Perhaps a fix to also trigger keyup when a collapsible element is opened would be a good addition?

[Mark-H]

I've added this to my header for the time being to make sure it recalcs the sizes on updatelayout.. would be open for better suggestions. :)

<script type="text/javascript">
    /* Fix for automatically assigning the right height in prefilled textareas, using rc2+ updatelayout event */
    $(document).bind('updatelayout',function() { $('textarea').keyup(); } )
</script>

[tgiardino]

This issue appears to still happen. I updated to rc2 but on initial load the textarea is left with a scrollbar for pre-populated data. If you do a page refresh it auto-grows as expected. This is also the case for the textarea on the demo page.

[tgiardino]

This issue is still present, textarea doesnt auto-grow pre-populated field on initial load. If you do a page refresh it works, this behavior can be seen on the demo page as well.

[Mark-H]

The one pre-filled textarea I could find ( http://jquerymobile.com/demos/1.0rc2/docs/forms/textinputs/ ) does resize for me, and it does too in my app. I just need to fire the keyup event on updatelayout to make sure it recalcs the height when a collapsible set is being opened (see earlier comment)...

[tgiardino]

So when i copied your link into my browser it works fine, but if you navigate to that same page from the jquery mobile (docs=>form elements=> text inputs) it doesnt show up correctly. Im using google chrome right now, this same behavior is what is happening in my app.

[toddparker]

I see that too. There must be something a bit different between loading this directly or pulling in in via ajax that isn't triggering this. Good point @tgiardino - this should trigger an updatelayout event to keep fixed toolbars happy.

[Mark-H]

Hmm yeah that seems to be an issue here too. Perhaps it's somewhat related to the issue I had with it not auto growing from a collapsible item - the only way people would end up on that page (usually) is by browsing to the form using AJAX...

[eddiemonge]

Anyone want to test #3004 to see if it fixes it or breaks anything else?

[serbulent]

With 1.1.0-rc1 (on android platform and also with firefox) I still reproduce problem with a textarea in a collapsible item. the workaround;

$(document).bind('updatelayout',function() { $('textarea').keyup(); } )

fixes the problem. I think the issue should reopened.

[markgmilner]

$(document).bind('updatelayout',function() { $('textarea').keyup(); } )
works to resize the textarea larger, however, it does not shrink the textarea when you resize the window larger.

This happens even when I also add
$(window).resize(function() { $('textarea').keyup(); } )

[jhogervorst]

This issue is still not fixed completely, as disables textareas (with pre-filled values) are not automatically resized on page loads.

Here's a demo page.

This issue is a bit annoying, since it's impossible to keyup a disabled textarea, thus making it impossible to see the full content.

[jaspermdegroot]

@serbulent - I will test textarea in a collapsible to see if that's still an issue.

@MarkusKa - There is another ticket for the textarea not auto-shrinking (#2719)

[jaspermdegroot]

Textarea in a collapsible is still a problem. Textarea in a panel even more. Also tested in a popup but that looks fine.

http://jsbin.com/owasir/3

[DzenisevichK]

Generally textarea doesn't return correct heights when it's hidden...

What about forcibly show it (here may be necessary to move it in visible container), get heights and revert changes? Slow but should work.

Related to autogrow for disabled - you need use readonly attribute if you want to view textarea content but don't allow to change it. And here also good to have the same style for disabled and readonly... I implemented this with:

.ui-input-text.ui-readonly-as-disabled[readonly],
.ui-disabled {
...

[jaspermdegroot]

I will test this again after the solution for #2719 (comment) (auto shrink) has landed.

[asantos]

You can use this to programmatically refresh the textarea's height:

$('#textarea').trigger('keyup');