search

bgrins / ExpandingTextareas

jQuery plugin for elegant expanding textareas
http://bgrins.github.com/ExpandingTextareas/
MIT License
261 stars 73 forks source link

Consecutive spaces don't wrap #13

Closed sidoh closed 10 years ago

sidoh commented 12 years ago

Because <pre> doesn't like to wrap for consecutive whitespace, this approach results in some strange behavior.

Try filling up a line and then adding a couple of spaces afterwards. One would expect the textbox to wrap, but it doesn't.

bgrins commented 12 years ago

Hmm I see that. Any ideas on how to fix this one?

sidoh commented 12 years ago

Changing the white-space CSS property to pre (instead of pre-wrap) on both the mirror element and the textarea seems to completely resolve this on Google Chrome. I haven't tested it on other browsers.

I didn't test very extensively, but it doesn't seem like it breaks anything else.

bgrins commented 12 years ago

Thanks, We would need to definitely run this through the gamut on tests. I'm not sure if pre is quite what we want, since if you type "areallylongwordwithnospaces" right on the end, I'm pretty sure it won't wrap.

No note on this from the original article: http://www.alistapart.com/articles/expanding-text-areas-made-elegant/, and demo on it seems to suffer from the same problem.

Maybe it should act as a normal textarea does in this case (at least in my browser), which is showing an overflow-x?

sidoh commented 12 years ago

At least on Chrome, it does wrap a bunch of unspaced text with pre, but I was a bit surprised to find that when I tried it.

I really like your plugin (and this solution). Thanks for it. :)

bgrins commented 12 years ago

No problem! I'm trying to get the remaining kinks worked out to make it as easy as possible and consistent to use.

Definitely weird about pre working, I don't really know why it does, but I would guess it causes some problems in other browsers.

sidoh commented 12 years ago

It's worth a try, I think. textareas don't wrap with spaces by default, so any solution would have to address that as well.

Let me know if I can help.

bgrins commented 12 years ago

I wonder if the fix from @jg314 will fix this issue. He recommends also copying the word-break property from textarea to pre.

https://github.com/bgrins/ExpandingTextareas/issues/14#issuecomment-5766438

domchristie commented 10 years ago

I’m not noticing any strange behaviour with v0.1.0, when filling a line and adding spaces, so perhaps this can be closed?

bgrins commented 10 years ago

Yes, let's close this. If this can be narrowed down to still be an issue with STR we can reopen.

domchristie commented 10 years ago

I have managed to reproduce this in Chrome: http://jsbin.com/fibiguha/2

Basically, if there is already a line-break after the spaces, they will not wrap. I’ve experimented withwhite-space: normal and white-space: pre-line, but they produce bizarre behaviour in IE.

The effect is particularly noticeable when working with an expanding textarea with a fixed-width font: inserting a single space right at the end of a line can cause the text to shift across. However this was only noticeable when the textarea had no padding. Applying padding seemed to fix this problem, even if the inner widths are identical: http://jsbin.com/wumor/1

To conclude, I think we’re stuck with non-wrapping behaviour for long sequences of white space (where a line-break already follows those spaces). The CSS white-space options make consecutive spaces wrap, but fail to produce the desired behaviour in IE. Ideally there should be some padding applied to the textarea to help avoid spaces overflowing content at the end of a line.

Hope that helps!