Wrong height when using box-sizing: border-box

[fjeldstad]

I tried using your plugin in an application using Twitter Bootrap, where textareas have box-sizing: border-box by default, and noticed that the textarea was not resizing properly (it lagged behind a bit).

After fiddling around a bit, I saw this line in the adjust() function:

mirror.style.width = $ta.css('width');

Doesn't this need to be changed in order to take horizontal padding into account when using border-box? Like this:

mirror.style.width = Math.max(0, $ta.width()) + "px"; // IE8 does not like negative widths

This seems to solve my issue. Haven't tested it thoroughly with other box-sizing values though. Any thoughts on this?

[jackmoore]

Were you using a recent version of autosize? Border-box should be properly accounted for version 1.7 or higher.

[fjeldstad]

I'm using 1.13.

[jackmoore]

I wasn't able to reproduce the problem using border-box by itself: http://jsfiddle.net/efzXr/

Everything seemed to work as expected.

[fjeldstad]

You're right, it does. Must be some other combination of styles that caused
it then...strange though, because my little mod seems to fix it (that or
removing the padding, or using content-box).

Den fredagen den 28:e september 2012 skrev Jack Moore:

I wasn't able to reproduce the problem using border-box by itself:
http://jsfiddle.net/efzXr/

Everything seemed to work as expected.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/28#issuecomment-8981432.

[fjeldstad]

Also this, which could explain my problem - the textarea I tested with was
inside a hidden div: http://bugs.jquery.com/ticket/10413

Den fredagen den 28:e september 2012 skrev Anders Fjeldstad:

I was using a newer version of jQuery (1.8.2) - this is the same fiddle
but using that version: http://jsfiddle.net/hF2Dd/

Seems like some things related to dimensions have changed in 1.8, for
example: http://bugs.jquery.com/ticket/11004

Den fredagen den 28:e september 2012 skrev Anders Fjeldstad:

You're right, it does. Must be some other combination of styles that
caused it then...strange though, because my little mod seems to fix it
(that or removing the padding, or using content-box).

Den fredagen den 28:e september 2012 skrev Jack Moore:

I wasn't able to reproduce the problem using border-box by itself:
http://jsfiddle.net/efzXr/

Everything seemed to work as expected.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/28#issuecomment-8981432.

[fjeldstad]

I was using a newer version of jQuery (1.8.2) - this is the same fiddle but
using that version: http://jsfiddle.net/hF2Dd/

Seems like some things related to dimensions have changed in 1.8, for
example: http://bugs.jquery.com/ticket/11004

Den fredagen den 28:e september 2012 skrev Anders Fjeldstad:

You're right, it does. Must be some other combination of styles that
caused it then...strange though, because my little mod seems to fix it
(that or removing the padding, or using content-box).

Den fredagen den 28:e september 2012 skrev Jack Moore:

I wasn't able to reproduce the problem using border-box by itself:
http://jsfiddle.net/efzXr/

Everything seemed to work as expected.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/28#issuecomment-8981432.

[fjeldstad]

Hm weird - I responded via e-mail and the order of the messages got mixed up.

[maimairel]

Hello, this also happened to me, I'm also using jQuery 1.8.2 :(
Is there still no work around for this?

EDIT:
after some debugging I found out that the cause of this problem is the mirrored textarea's width copies the original textarea's width in border-box, causing wrapped text in the original textarea is not yet wrapped on the mirror textarea.

It should actually be the content-box width of the original textarea instead of $ta.css('width'); on line 98

Thanks

[jackmoore]

The mirrored textarea element has the same border-sizing options as the original element, so what you are doing looks like it would break things for anyone not using content-box.

[maimairel]

Hello,

I'm sorry, but I tested this for both a content-box and border-box textarea, and they both works correctly.

Here's how I came up with that code, please correct me if I'm actually wrong :)

Example of a content-box textarea's dimension with 960px width:
1px border + 6px padding-left + 960px width + 6px padding-right + 1px border,

Example of a border-box textarea's dimension with 960px width:
1px border + 6px padding-left + 946px width + 6px padding-right + 1px border,

The mirrored textarea is hard-coded as content-box, so setting the width of the mirror equal to jQuery.width() of the original textarea would set the mirror's width to 946px, instead of the 960px from .css('width')

This would make the mirror's dimension like follows:
1px border + 6px padding-left + 946px width + 6px padding-right + 1px border, thus equal to that of the border-box textarea.

It also wouldn't be a problem if the original textarea is a content-box, because that would set the mirror's width to 960px, thus equal to the original textarea.

Thank you.

[jackmoore]

Thank you both for the amount of research you put into this. Maimairel, your fix works great. I'm apologize for my lateness acknowledging that. I didn't realize at first because I was using jQuery 1.7, where .width() worked with border-box sizing.