New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
gillespasse opened this Issue Nov 18, 2010 · 25 comments

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Nov 22, 2010

Contributor

What device/OS is this on?

Contributor

toddparker commented Nov 22, 2010

What device/OS is this on?

@phoobahr

This comment has been minimized.

Show comment
Hide comment
@phoobahr

phoobahr Nov 23, 2010

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

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

@idrinkmusic

This comment has been minimized.

Show comment
Hide comment
@idrinkmusic

idrinkmusic Nov 25, 2010

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.

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

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Dec 7, 2010

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

ghost commented Dec 7, 2010

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

@roark31337

This comment has been minimized.

Show comment
Hide comment
@roark31337

roark31337 Jan 25, 2011

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.

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.

@ghost ghost assigned gseguin Aug 8, 2011

@tommedema

This comment has been minimized.

Show comment
Hide comment
@tommedema

tommedema Oct 11, 2011

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

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

@ghost ghost assigned johnbender Oct 11, 2011

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 11, 2011

Contributor

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)

Contributor

toddparker commented Oct 11, 2011

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 comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Oct 19, 2011

Contributor

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

Contributor

toddparker commented Oct 19, 2011

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

@toddparker toddparker closed this Oct 19, 2011

@Mark-H

This comment has been minimized.

Show comment
Hide comment
@Mark-H

Mark-H Oct 25, 2011

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 commented Oct 25, 2011

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

This comment has been minimized.

Show comment
Hide comment
@Mark-H

Mark-H Oct 25, 2011

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>

Mark-H commented Oct 25, 2011

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 comment has been minimized.

Show comment
Hide comment
@tgiardino

tgiardino Nov 8, 2011

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.

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 comment has been minimized.

Show comment
Hide comment
@tgiardino

tgiardino Nov 8, 2011

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.

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

This comment has been minimized.

Show comment
Hide comment
@Mark-H

Mark-H Nov 8, 2011

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)...

Mark-H commented Nov 8, 2011

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

This comment has been minimized.

Show comment
Hide comment
@tgiardino

tgiardino Nov 9, 2011

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.

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Nov 9, 2011

Contributor

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.

Contributor

toddparker commented Nov 9, 2011

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.

@toddparker toddparker reopened this Nov 9, 2011

@ghost ghost assigned Wilto Nov 9, 2011

@Mark-H

This comment has been minimized.

Show comment
Hide comment
@Mark-H

Mark-H Nov 9, 2011

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...

Mark-H commented Nov 9, 2011

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

This comment has been minimized.

Show comment
Hide comment
@eddiemonge

eddiemonge Nov 9, 2011

Contributor

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

Contributor

eddiemonge commented Nov 9, 2011

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

@Wilto Wilto closed this in fab9de1 Nov 9, 2011

@serbulent

This comment has been minimized.

Show comment
Hide comment
@serbulent

serbulent Mar 31, 2012

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.

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.

@toddparker toddparker reopened this Apr 2, 2012

@markuska

This comment has been minimized.

Show comment
Hide comment
@markuska

markuska Jun 28, 2012

$(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(); } )

$(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(); } )

@ghost ghost assigned jaspermdegroot Dec 3, 2012

@jhogervorst

This comment has been minimized.

Show comment
Hide comment
@jhogervorst

jhogervorst Feb 24, 2013

Contributor

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.

Contributor

jhogervorst commented Feb 24, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Apr 3, 2013

Member

@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)

Member

jaspermdegroot commented Apr 3, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Apr 3, 2013

Member

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

Member

jaspermdegroot commented Apr 3, 2013

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

@jaspermdegroot jaspermdegroot reopened this Apr 3, 2013

@DzenisevichK

This comment has been minimized.

Show comment
Hide comment
@DzenisevichK

DzenisevichK May 10, 2013

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 {
...

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 23, 2013

Member

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

Member

jaspermdegroot commented May 23, 2013

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

gabrielschulhof added a commit that referenced this issue Sep 3, 2013

Autogrow: Listen to the various you-have-become-visible events trigge…
…red by the various framework widgets and resize the textarea synchronously. Fixes #6365, fixes #509.
@asantos

This comment has been minimized.

Show comment
Hide comment
@asantos

asantos Dec 5, 2014

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

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

asantos commented Dec 5, 2014

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

$('#textarea').trigger('keyup');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment