Stepper Height

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

DANY pro premium 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 pro premium priority 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 Szymanska staff pro premium 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

DANY pro premium 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.

Marta Szymanska staff pro premium 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

DANY pro premium 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 Szymanska staff pro premium 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
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
  • User: Pro
  • 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
Related topics
0
Steps (Stepper) - Problem
0
Stepper (external triggers) Not Working Using Documented Code Sample
0
Table within Stepper
0
Stepper - Problem rendering map component in Step
0
Stepper show and shown listeners?
About author
Yutaka
Pro User Premium support
120Support score
16Questions 6Answers
0Snippets likes 4Snippets