I am working on a carousel that functions as a form. One of the carousel items contains a multi-select box. How can I automatically increase the height of only that specific carousel item as the height of the multi-select box increases?
The first image shows how the carousel currently looks. The second image depicts how I would like it to appear.
Any insights or suggestions would be greatly appreciated. I am unable to refresh the carousel as it will cause my form inputs to be unset.
https://i.sstatic.net/3oqEU.png
<div class="row no-gutters" id="mob-carousel-row" [style.height.px]="mobileCarouselRowHeight">
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="fa fa-angle-left mobile-form-nav" ></i>
</a>
</div>
<div class="col-10">
<div
#plMobileCarouselForm
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
data-interval="false">
<div class="carousel-inner" role="listbox" id="mob-carousel">
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob muti-select">
<!-- multi-select box item needs auto height adjustment -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
</div>
</div>
</div>
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="fa fa-angle-right mobile-form-nav" ></i>
</a>
</div>
</div>