Textinput: disabled textarea doesn't need extra height for an extra line

[jhogervorst]

Textareas are automatically resized (in height) to prevent scrollbars from appearing. When they are resized, extra height (15px) is added to provide space for another line of input.

When users are typing into the textarea, this is a great way of communicating that they can continue typing without a limit. However, this extra space is unnecessary (and even kind of ugly) when the textarea is disabled.

Here's a screenshot that explains the situation:

I'll submit a pull request that implements this proposal in a few minutes.

Note

The correct working of my fix requires that issue #509 is fixed (e.g., by accepting my pull request #5691).

As you may see in the screenshot, the second textarea is still a bit too high. After some research it turns out to be a bug in jQuery. I'll report that later and post a link to that issue later.

[jhogervorst]

It turns out that the extra height visible in the proposed textarea in my original screenshot is not caused by jQuery as I claimed in my original post (although their documentation made me to believe that).

As a result, first the issue with the extra height needs to be fixed (#5690). I submitted pull request #5692 with a fix. When that's approved I'll submit a fix for this issue.

Apologies for the mess in this (and the other) issues …

[jhogervorst]

A quick update: I just submitted pull request #5848 for issue #5690. When that pull request is approved, I will submit a fix (pull request) for this issue.

[jaspermdegroot]

@jhogervorst

If we remove the extra line when disabled it will suddenly come back at the first keyup when the textarea is enabled again. Not sure if that's a good idea. Let's see how this looks now your PR #5848 has been merged.

[jhogervorst]

@uGoMobi I'm not sure whether I totally understand what you mean.

I think there are four possible situations:

• Extra line appears directly after enabling.
• Extra line appears after focussing (after enabling).
• Extra line appears after typing (after enabling).
• Extra line appears after an(other) extra line is needed (after enabling).

The last option would cause fewest visual changes. Do you prefer one of these options?

And do you think that a textarea should shrink if it's disabled in runtime (when there's already an extra line)?

[jaspermdegroot]

@jhogervorst

Ah ok, I was only thinking about the 3rd option. My comment was about that and I don't think I like that one. I would be in favor of the first option.

Currently it looks like this http://jsbin.com/owasir/3 which isn't too bad if you ask me. I agree it can be optimized, but we always have to consider if it's worth the extra code and what it does to performance.
Checking if the textarea is disabled on each keyup might not be a good idea, but adding logic to the disable and enable methods to remove/add the extra line is probably acceptable.

Re: shrinking. Yes, I think that's a good idea. Actually, if the logic is in the disable method it will also take care of this. Talking about shrinking... do you feel like fixing #2719? :)

Thanks for all the efforts!

[jhogervorst]

@uGoMobi OK, then we'll go with the first option. I'll start working on this soon. Fixing #2719 wouldn't be a problem. I'll keep you updated!

[jaspermdegroot]

@jhogervorst

Ok, great! Please note that the fix for this issue as well as the one for #2719 will be for 1.4. They are not really bug fixes, but more improvements so they shouldn't land in a 1.3.x maintenance release.

You are always welcome to hop on #jquerymobile-dev freenode IRC if you wan't to discuss things.

Thanks!

[jhogervorst]

I'll submit a PR as soon as PR #6180 is accepted (that solves issue #6178), and the PR for issue #6179 is submitted and accepted, as the fix for this issue would conflict with the fixes for the other issues (if they're submitted at the same time).

[arschmitz]

Thank you for the PR i reviewed this morning and we had some discussion and im going to close this issue and its associated PR. We think visually it is better that if 2 textareas have the same content that they be the same height regardless of if they are disabled or not.