Yutaka priority asked 5 years ago


https://mdbootstrap.com/snippets/jquery/dany/102482

MDB-PRO 4.5.13
In the stepper panel height in the <ul class="stepper horizontal" id="horizontal-stepper"> does auto fit the height of the <div class="step-new-content"> </div> Could you please check
<div class="card">
  <div class="card-body">
    <ul class="stepper horizontal" id="horizontal-stepper">
      <li class="step active">
        <div class="step-title waves-effect waves-dark">Step 1</div>
        <div class="step-new-content">
          <div class="row">
            <div class="md-form col-12 ml-auto">
              <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
                <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
                  <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
                    <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
                      <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
                        <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
            </div>
          </div>
          <div class="step-actions">
            <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction21">CONTINUE</button>
          </div>
        </div>
      </li>
      <li class="step">
        <div class="step-title waves-effect waves-dark">Step 2</div>
        <div class="step-new-content">
          <div class="row">
            <div class="md-form col-12 ml-auto">
              <input id="password-horizontal" type="password" class="validate form-control" required>
              <label for="password-horizontal">Your password</label>
            </div>
          </div>
          <div class="step-actions">
            <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction21">CONTINUE</button>
            <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
          </div>
        </div>
      </li>
      <li class="step">
        <div class="step-title waves-effect waves-dark">Step 3</div>
        <div class="step-new-content">
          Finish!
          <div class="step-actions">
            <button class="waves-effect waves-dark btn-sm btn btn-primary m-0 mt-4" type="button">SUBMIT</button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Michal Szymanski staff answered 5 years ago


The problem is caused by .card and .card-body classes.

Removing them will solve the problems.

<ul class="stepper horizontal" id="horizontal-stepper">
      <li class="step active">
        <div class="step-title waves-effect waves-dark">Step 1</div>
        <div class="step-new-content">
          <div class="row">
            <div class="md-form col-12 ml-auto">
              <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
                <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
                  <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
                    <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
                      <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
                        <input id="email-horizontal" type="email" class="validate form-control" required>
              <label for="email-horizontal">Email</label>
            </div>
          </div>
          <div class="step-actions">
            <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction21">CONTINUE</button>
          </div>
        </div>
      </li>
      <li class="step">
        <div class="step-title waves-effect waves-dark">Step 2</div>
        <div class="step-new-content">
          <div class="row">
            <div class="md-form col-12 ml-auto">
              <input id="password-horizontal" type="password" class="validate form-control" required>
              <label for="password-horizontal">Your password</label>
            </div>
          </div>
          <div class="step-actions">
            <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction21">CONTINUE</button>
            <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
          </div>
        </div>
      </li>
      <li class="step">
        <div class="step-title waves-effect waves-dark">Step 3</div>
        <div class="step-new-content">
          Finish!
          <div class="step-actions">
            <button class="waves-effect waves-dark btn-sm btn btn-primary m-0 mt-4" type="button">SUBMIT</button>
          </div>
        </div>
      </li>
    </ul>



However, if you still want to have the same visual "card" effect you can wrap your stepper like this.

 

    <div class="z-depth-1">

<div class="p-3">

<ul class="stepper horizontal" id="horizontal-stepper">

<li class="step active">

<div class="step-title waves-effect waves-dark">Step 1</div>

<div class="step-new-content">

<div class="row">

<div class="md-form col-12 ml-auto">

<input id="email-horizontal" type="email" class="validate form-control" required>

<label for="email-horizontal">Email</label>

<input id="email-horizontal" type="email" class="validate form-control" required>

<label for="email-horizontal">Email</label>

<input id="email-horizontal" type="email" class="validate form-control" required>

<label for="email-horizontal">Email</label>

<input id="email-horizontal" type="email" class="validate form-control" required>

<label for="email-horizontal">Email</label>

<input id="email-horizontal" type="email" class="validate form-control" required>

<label for="email-horizontal">Email</label>

<input id="email-horizontal" type="email" class="validate form-control" required>

<label for="email-horizontal">Email</label>

<button type="button" class="btn btn-primary">Primary</button> <br>

<button type="button" class="btn btn-primary">Primary</button> <br>

<button type="button" class="btn btn-primary">Primary</button> <br>

<button type="button" class="btn btn-primary">Primary</button> <br>

<button type="button" class="btn btn-primary">Primary</button> <br>

</div>

</div>

<div class="step-actions">

<button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction21">CONTINUE</button>

</div>

</div>

</li>

<li class="step">

<div class="step-title waves-effect waves-dark">Step 2</div>

<div class="step-new-content">

<div class="row">

<div class="md-form col-12 ml-auto">

<input id="password-horizontal" type="password" class="validate form-control" required>

<label for="password-horizontal">Your password</label>

</div>

</div>

<div class="step-actions">

<button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction21">CONTINUE</button>

<button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>

</div>

</div>

</li>

<li class="step">

<div class="step-title waves-effect waves-dark">Step 3</div>

<div class="step-new-content">

Finish!

<div class="step-actions">

<button class="waves-effect waves-dark btn-sm btn btn-primary m-0 mt-4" type="button">SUBMIT</button>

</div>

</div>

</li>

</ul>

</div>

</div>

Marta Wierzbicka staff answered 5 years ago


Hi, for now, we don't have a better solution for the card inside steppers. We will work on it and present the solution as soon as possible. Best, Marta

Marta Wierzbicka staff answered 5 years ago


Hi, I modify your code a little and please, look at this: https://mdbootstrap.com/snippets/jquery/marta-szymanska/104548. Is this solution fine for you? I changed min-height: 20rem to 40rem for your case and added .col class after .row because in Bootstrap columns are always children of row. Best, Marta

Yutaka priority commented 5 years ago

Hello, i check the snippet,

but if i add another card into the stepper the scroll bar appears, i need the height to be dynamic based on the content, if i modify min-height to fit step 1 and change to step 2 and the content is smaller the submit button will be further down.

i also noticed that the items are not on the same top from one step to another.

could you check please check my snippet again to see the example i am reffering to.

thank you


Marta Wierzbicka staff answered 5 years ago


Hi, please, present your problem here: https://mdbootstrap.com/snippets. Create a snippet and I will try to modify it and help you with this problem. You can also describe the problem as detailed as possible. Best, Marta

Yutaka priority commented 5 years ago

https://mdbootstrap.com/snippets/jquery/dany/102482

Look In the stepper panel, the  height does not autofit to the height content.

Thanks.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: Chrome
  • OS: W10
  • Provided sample code: No
  • Provided link: Yes