Increase the textarea size

Question

I’m trying to use the Sweet Alert 2.

I would like to increase the textarea field using the Rows attribute, but it is not working.

How do I increase the field size?

$('.btn').on('click', function(){
  telaModal()
});
function telaModal(){

        swal({
            title: 'Dados do acidente',
            html:
            '<input id="swal-input1" class="swal2-input" placeholder="Data do Acidente">' +
            '<textarea id="swal-input2" class="swal2-input" rows="100"></textarea>',
            focusConfirm: false,
            customClass: 'sweetalert-lg',
            onOpen: function() {
                $('#swal-input1').datetimepicker({
                    "format": 'd/m/Y',
                    "mask":true,
                    "value": new Date()
                });


            },
            width: '400px',
            heightAuto: false,
            preConfirm: () => {
                return [
                    document.getElementById('swal-input1').value,
                    document.getElementById('swal-input2').value
                ]
            }
        })


    }

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.25.0/sweetalert2.all.min.js"></script>

<button class='btn' >Clique</button>

I’d like it to look something like this:

Answer 1

The class swal2-input is superimposing the rows with a height, and that probably comes from lib that you are using, to resolve just add a new class and set a height for her as !important...

$('.btn').on('click', function(){
  telaModal()
});
function telaModal(){

        swal({
            title: 'Dados do acidente',
            html:
            '<input id="swal-input1" class="swal2-input" placeholder="Data do Acidente">' +
            '<textarea id="swal-input2" class="swal2-input text-area"></textarea>',
            focusConfirm: false,
            customClass: 'sweetalert-lg',
            onOpen: function() {
                $('#swal-input1').datetimepicker({
                    "format": 'd/m/Y',
                    "mask":true,
                    "value": new Date()
                });


            },
            width: '400px',
            heightAuto: false,
            preConfirm: () => {
                return [
                    document.getElementById('swal-input1').value,
                    document.getElementById('swal-input2').value
                ]
            }
        })


    }

.text-area {
  height: 10em !important;
}

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.25.0/sweetalert2.all.min.js"></script>

<button class='btn' >Clique</button>

Answer 2

The "swal2-input" class of its component has a pre-set height.

You can both delete the class from your html:

'<textarea id="swal-input2" rows="100"></textarea>',

When you add a height:auto, you can use Rows as a size setter:

'<textarea id="swal-input2" style="height:auto!important" class="swal2-input" rows="100"></textarea>',

Since according to the documentation the class for textarea is swal2-textarea, but even with it Rows does not work.