ExpandingTextareas
ExpandingTextareas copied to clipboard
min-height not working as expected
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
Hi Paul,
What happens when you visit: http://bgrins.github.io/ExpandingTextareas/test/
Are there any failures?
Hi Dom,
Thanks for your reply. The tests all passed on both browseres
- ExpandingTextareas: Ensures the clone is at least as tall as the textarea (0, 1, 1)Rerun42 ms
Textarea wrapper CSS
min-heightset 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.
@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/.
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
This looks like it could be a bug with the way Firefox 35 renders
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 https://github.com/bgrins/ExpandingTextareas/issues/59#issuecomment-70565900 may fix your issue, although you should probably be a bit more specific with the selector - something like:
textarea.expanding {
overflow-x: hidden;
}
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 https://github.com/bgrins/ExpandingTextareas/issues/8#issuecomment-33510480)
- 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!)