ExpandingTextareas icon indicating copy to clipboard operation
ExpandingTextareas copied to clipboard

min-height not working as expected

Open pzheng64 opened this issue 10 years ago • 6 comments

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

pzheng64 avatar Jan 19 '15 17:01 pzheng64

Hi Paul,

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

Are there any failures?

domchristie avatar Jan 19 '15 18:01 domchristie

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.

pzheng64 avatar Jan 19 '15 19:01 pzheng64

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

bgrins avatar Jan 19 '15 20:01 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:

screen shot 2015-01-19 at 21 23 07

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

domchristie avatar Jan 19 '15 21:01 domchristie

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;
}

bgrins avatar Jan 20 '15 03:01 bgrins

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

domchristie avatar Jan 20 '15 09:01 domchristie