I have a web page with a wizard containing three steps.
Transitioning from step 1 to step 2 causes the content in step 2 to push the content in step 1 down. Moving from step 2 to step 3 flips over to display the content in step 3, concealing the content in step 1 and 2. The working example can be seen in this Bootply. Below is the code:
<div class="container-fluid" style="background-color:#eee;">
<div class="container">
<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="step-2-default" id="step2" style="overflow-x:hidden; padding:0.0rem 1.0rem;">
<label>Step 2</label>
<p>Details of the second step</p>
<button id="nextButton2">next</button>
</div>
<div class="step-1-default" id="step1">
<label>Step 1</label>
<p>Details of the first step</p>
<button id="nextButton1">next</button>
</div>
</div>
<div class="back">
<div id="step3">
<label>Step 3</label>
<p>Thank you for using this wizard</p>
</div>
</div>
</div>
</div>
</div>
</div>
The initial issue is the background-color set to #eee, which is not appearing due to the height being 0. The goal is to adjust the div size based on the front class's height. Essentially, ensuring the div matches or exceeds the front div's height. This dynamic adjustment should accommodate the growth when step 2 reveals itself.
If anyone knows how to address this challenge, please share your insights!