Increase textarea's size

Navigation
1

I'm trying to use Sweet Alert 2 .

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

How do I increase the size of the field? 

$('.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><buttonclass='btn'>Clique</button>

Iwouldlikeittolooksomethinglikethis:

    
asked by anonymous 10.07.2018 / 20:29

2 answers

2

Your component's "swal2-input" class has a pre-set height.

You can either delete the class from your html: 

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

How to add a height: auto, to be able to use rows as size-definer: 

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

As the documentation for the class for textarea is swal2-textarea, but even with it rows does not work.

    
10.07.2018 / 20:41
1
The swal2-input class is overriding the rows with a height , and this probably comes from the lib you're using, to solve it, just add a new class and set a height to it 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>
    
10.07.2018 / 20:38
Prevent character typing, if the monetary value is incorrect in delphi Use prompt return with ternary operator