52px height bug

[pypetey]

jQuery autosize automatically sets my textarea to 52px:

<textarea class="textarea" name="description" placeholder="Write your comment." style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 52px;"></textarea>

I want to make it to have a bit smaller height - 35px. Overwriting styles in any way does not help.

Is there a way to avoid that problem?

[jackmoore]

Autosize sets the min-height to be whatever the starting height is. Then it increases the height to fit the text plus autosize's appended whitespace. My guess is that the 52px height is either unrelated to autosize, or it's due to the whitespace autosize is appending at the bottom of the textarea.

You can remove the whitespace like so:

$('.example').autosize({append:false});

However, this buffer of whitespace does help give a smoother resizing in IE10 (see issue #148), and when using CSS transition for the height.

[aliakhtar]

yeah, i'm having this same issue, but for me, its setting the textarea to 63px. i've tried doing the append:false, no luck. when i don't call autosize on the textarea, then my height is set to 39px which is what i want. but autosize is forcing it to 63px even with append:false. any ideas?

[jackmoore]

Could you post a demo that reproduces the problem?

[jclement]

I'm seeing something similar with code that I thought had been working (I'm sure the append:false fixed this for me a couple months ago). We want a single line textarea that grows as needed (it's in a grid so the '\n' append makes the grid much too tall).

http://jsfiddle.net/my1vv96a/1/

The above example works as I'd like in Chrome but the vertical hight is wrong in Firefox. In IE it's not working at all.

Any help would be appreciated!

[aliakhtar]

Fyi, i have the same issue, it works as expected in chrome, but in firefox its bigger vertically than I'd like, in exactly the same way as the jsfiddle. I haven't tested IE 11.

[drampelt]

Having the same problem. Works great in chrome, but in firefox it starts at about double the size.

[karibtech]

@drampelt : Setting the initial height in css(Ex: height: 20px) to the textarea, along with "{append: false}" fixed the issue for me in Firefox

P.S:
Autosize Version: 1.18.13
Firefox version: 33(Windows)

[jclement]

@karibtech That worked well for me. I ended up wrapping the $.fn.autosize() to do this automagically:

(function() {
    var autosize = $.fn.autosize;
    $.fn.autosize = function() {
        if (bowser.firefox) {
            if (this.hasClass("thin")) { // internal class for input box in a grid
                this.css("height", "20px");
            } else {
                this.css("height", "30px");
            }
        }
        autosize(this, arguments);
        return this;
    };
})();

[samedii]

I had this issue because of an unseen whitespace character