min-height not working as expected

[pzheng64]

Hi, Thanks for great auto-expanding plug-in for textarea.

I have an issue in FF latest version (35.0) on Windows. I set rows="1" for my textarea and it is calculated as min-height:51px for single row.
The textarea element \has short word value like "Apr", "Save", "Cancel", etc

browser: FF 35.0
OS: Windows 7.0
placement: The <textarea> elements are nested in tag.
value: Short single word (less than 10 characters)
plugin version: 0.2.0

It works correctly on Chrome (min-height:34px), but on FF it does not.

Thanks,
Paul.

[domchristie]

Hi Paul,

What happens when you visit: http://bgrins.github.io/ExpandingTextareas/test/

Are there any failures?

[pzheng64]

Hi Dom,

Thanks for your reply. The tests all passed on both browseres

1. ExpandingTextareas: Ensures the clone is at least as tall as the textarea (0, 1, 1)Rerun42 ms
   Textarea wrapper CSS min-height set to textarea outer height

Well... this can be said true because textarea itself could be that tall by default if rows="1", but I think the auto-expanding plug-in should make the textarea look good even though how tall the default textarea element looks like.

Oh, I forgot one thing to mention. I use bootstrap 3 and added the class form-control, but it doesn't matter.

So, if there are only few characters in the textarea, it should have min-height:34px so that there are no unneeded extra space vertically inside textarea.

Can you try yourself to test this case?

Thanks,
Paul.

[bgrins]

@pzheng64 could you link to a demo page showing the problem? You can use this jsfiddle as a starting point: http://jsfiddle.net/bgrins/wfsg5mbe/.

[domchristie]

This looks like it could be a bug with the way Firefox 35 renders <textarea rows=1> on Windows (with out without the expanding behaviour:

The bug is noted on the mozilla bug tracker, along with a possible solution—apply the following:

textarea {
  overflow-x: hidden;
}

(unless you need a horizontal scroll bar)

This may be suitable for including in the plugin, too

[bgrins]

This looks like it could be a bug with the way Firefox 35 renders <textarea rows=1> on Windows (with out without the expanding behaviour:

Wow, good find - that's an old bug. I'm hesitant to add that CSS by default to the plugin to add a workaround for this edge case since it could cause some side effects. And the comment following that one indicates that it may not work, but I haven't tested it.

Assuming this is the same issue that is being reported here, we should close this issue since we don't have control over how the browser renders that textarea. @pzheng64 the CSS in #59 (comment) may fix your issue, although you should probably be a bit more specific with the selector - something like:

textarea.expanding {
  overflow-x: hidden;
}

[domchristie]

This does seem to fix the issue on Windows Firefox, however I think we should set a overflow:hidden or overflow-x:hidden on the textarea when possible (as in #8 (comment))

• if textarea has no max-height or wrap settings: overflow: hidden
• else if textarea has max-height, but no wrap settings: overflow-x: hidden
• else overflow: auto

(update: else to auto!)