Dinamic resizing of content not working on smart wizard plugin

consider the following jquery function:

$(document).ready(function () {
        $('#add-product').click(function () {
            $("<div class='row'> <div class='col'> <div class='form-group'><input type='text' class='form-control products' placeholder='Product name'> </div> </div> </div>").appendTo($('.products'))
        })
        $('.tab-content').height('100%')
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='add-product'> click me </button>
<div class='products'>
</div>

the previous appends an input field inside the .tab-content, it works but the size of the content container doesn't change dynamically, only changes when i go to next step then return to previous step

tried messing with the parameters on plugin init such as: justified: true or false, autoAdjustHeight: true or false also tried adding style = "height:100% or auto" to DOM, nothing seems to work

Solution

Can you try this :

$('.tab-content').height('100%') ; must be inside the click function

$(document).ready(function () {
        console.log("height before : "+ $(".tab-content").height() );
        $('#add-product').click(function () {
            $("<div class='row'> <div class='col'> <div class='form-group'><input type='text' class='form-control products' placeholder='Product name'> </div> </div> </div>").appendTo($('.products'))
        
          $('.tab-content').height('100%') ;
          console.log("height after : "+ $(".tab-content").height() );
        })
    })

.tab-content {
   height : 50%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='add-product'> click me </button>

<div class='tab-content'>
  <div class='products'>
  </div>
</div>