Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Stepper Height

Yutaka priority asked 6 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 6 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 6 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 6 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 6 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 6 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 6 years ago

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

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

Thanks.
Write
Create snippet
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
Tags
stepper step steppers
About author
Yutaka
120Support score
16Questions 6Answers 4Snippets