textarea readonly auto height (that fills with selected dates)

Question

I use MultiDatesPicker calendar where the user can select some dates. A textarea (with readonly tag) object filled automatically with dates, while the user selects some of them and is working fine. What I liked to do now is to make height of textarea equal to height of the text within it (dates from Multidatespicker). Starting from 1 row.

I tried this answer (2nd answer) Creating a textarea with auto-resize (working: jsfiddle) but didn't work for my case

HTML

<div class="pick-multi-dates"></div>
<textarea rows="1" id="input-multi-dates" class="input-multi-dates"></textarea>

JQUERY

    $('.pick-multi-dates').multiDatesPicker({
        minDate: 0,
        altField: '#input-multi-dates',
        onSelect: function() {
            $('.input-multi-dates').css('height', 'auto' );
            $('.input-multi-dates').height( this.scrollHeight );
        }
    });

CSS

.input-multi-dates {
    overflow-y: hidden; /* prevents scroll bar flash */
    padding-top: 1.1em; /* prevents text jump on Enter keypress */
}

Thank you

Answer 1

Try this:

$('.pick-multi-dates').multiDatesPicker({
        minDate: 0,
        altField: '#input-multi-dates',
        onSelect: function() {
            var text = document.getElementById('input-multi-dates');
            text.style.height = 'auto';
            text.style.height = text.scrollHeight+'px';
        }
    });