jQuery Mobile textarea resizing issue

Question

I have a textarea element which sits in the footer of the page (to emulate the native compose box for messages in iOS). As text is entered, it grows or shrinks accordingly. The height of this element seems to be computed to 52px.

I would like the height to be smaller. However, setting the initial height (without important) simply gets overwritten by 52px. Setting the initial height to around 35px (with important) disables the auto-grow feature and a scroll bar appears instead. I've played around with the web inspector, but I can't seem to figure out where this 52px is being computed from.

What is the solution to this problem? The code is pretty straight forward. I am working with jQuery 1.10.2 and jQuery Mobile 1.4.0.

HTML

<div data-role="footer" data-theme="a" data-position="fixed" data-tap-toggle="false" class="custom-footer">
        <div class="group-footer">
            <div class="map-icon">
                <img src="assets/[email protected]" style="width: 25px;height: 25px;" />
            </div>
            <div class="text-box">
                <textarea name="textarea" class="define-textarea" id="inbox-continue-conversation"></textarea>
            </div>
            <div class="send-link"><a href="#" id="inbox-continue-answer-button">Send</a>
            </div>
        </div>

</div>

CSS

.define-textarea {
font-size: 1em !important;
border-color: #cccccc !important;
border-radius: 5px;
}

Answer 1

Your issue stems from this line in the jQuery mobile source. When calculating the new height for an autoresizing jquery mobile textarea form widget, it adds 15px to the calculated height.

This is hard coded, so no option to tweak here.

You could work around this with a monkey patch for the textinput widget. It would have to do two things:

1. Add a default option for the added height, e.g. autogrowSpace
2. Override the private function _updateHeight in $.mobile.widgets.textinput in to use this new option

Working jsfiddle employing the discussed monkey patch:

http://jsfiddle.net/marionebl/48c7x/2/

Example _updateHeight copied from jQuery mobile source:

(function ($, undefined) {

    $.widget("mobile.textinput", $.mobile.textinput, {
        options: {
            autogrow:true,
            autogrowSpace: 0,
            keyupTimeoutBuffer: 100
        },

        _updateHeight: function () {
            var paddingTop, paddingBottom, paddingHeight, scrollHeight, clientHeight,
            borderTop, borderBottom, borderHeight, height,
            scrollTop = this.window.scrollTop();
            this.keyupTimeout = 0;

            // IE8 textareas have the onpage property - others do not
            if (!("onpage" in this.element[0])) {
                this.element.css({
                    "height": 0,
                        "min-height": 0,
                        "max-height": 0
                });
            }

            scrollHeight = this.element[0].scrollHeight;
            clientHeight = this.element[0].clientHeight;
            borderTop = parseFloat(this.element.css("border-top-width"));
            borderBottom = parseFloat(this.element.css("border-bottom-width"));
            borderHeight = borderTop + borderBottom;
            height = scrollHeight + borderHeight + this.options.autogrowSpace;

            if (clientHeight === 0) {
                paddingTop = parseFloat(this.element.css("padding-top"));
                paddingBottom = parseFloat(this.element.css("padding-bottom"));
                paddingHeight = paddingTop + paddingBottom;

                height += paddingHeight;
            }

            this.element.css({
                "height": height,
                    "min-height": "",
                    "max-height": ""
            });

            this.window.scrollTop(scrollTop);
        },

    });

})(jQuery);