Stepper Height

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>

Add comment

Michal Szymanski staff answered 6 years ago

1 0 Best answer

<p>The problem is caused by .card and .card-body classes.</p><p>Removing them will solve the problems.</p><pre class="code-toolbar grey lighten-2 p-3 mb-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>
            </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></pre><p><br /><br /><strong>However, if you still want to have the same visual "card" effect you can wrap your stepper like this.</strong></p><p> </p><div><pre class="code-toolbar grey lighten-2 p-3 mb-3">    <div class="z-depth-1"><br /><br />      <div class="p-3"><br /><br />        <ul class="stepper horizontal" id="horizontal-stepper"><br /><br />          <li class="step active"><br /><br />            <div class="step-title waves-effect waves-dark">Step 1</div><br /><br />            <div class="step-new-content"><br /><br />              <div class="row"><br /><br />                <div class="md-form col-12 ml-auto"><br /><br />                  <input id="email-horizontal" type="email" class="validate form-control" required><br /><br />                  <label for="email-horizontal">Email</label><br /><br />                    <input id="email-horizontal" type="email" class="validate form-control" required><br /><br />                  <label for="email-horizontal">Email</label><br /><br />                      <input id="email-horizontal" type="email" class="validate form-control" required><br /><br />                  <label for="email-horizontal">Email</label><br /><br />                        <input id="email-horizontal" type="email" class="validate form-control" required><br /><br />                  <label for="email-horizontal">Email</label><br /><br />                          <input id="email-horizontal" type="email" class="validate form-control" required><br /><br />                  <label for="email-horizontal">Email</label><br /><br />                            <input id="email-horizontal" type="email" class="validate form-control" required><br /><br />                  <label for="email-horizontal">Email</label><br /><br />                  <button type="button" class="btn btn-primary">Primary</button> <br><br /><br />                  <button type="button" class="btn btn-primary">Primary</button> <br><br /><br />                  <button type="button" class="btn btn-primary">Primary</button> <br><br /><br />                  <button type="button" class="btn btn-primary">Primary</button> <br><br /><br />                  <button type="button" class="btn btn-primary">Primary</button> <br><br /><br />                </div><br /><br />              </div><br /><br />              <div class="step-actions"><br /><br />                <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction21">CONTINUE</button><br /><br />              </div><br /><br />            </div><br /><br />          </li><br /><br />          <li class="step"><br /><br />            <div class="step-title waves-effect waves-dark">Step 2</div><br /><br />            <div class="step-new-content"><br /><br />              <div class="row"><br /><br />                <div class="md-form col-12 ml-auto"><br /><br />                  <input id="password-horizontal" type="password" class="validate form-control" required><br /><br />                  <label for="password-horizontal">Your password</label><br /><br />                </div><br /><br />              </div><br /><br />              <div class="step-actions"><br /><br />                <button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="someFunction21">CONTINUE</button><br /><br />                <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button><br /><br />              </div><br /><br />            </div><br /><br />          </li><br /><br />          <li class="step"><br /><br />            <div class="step-title waves-effect waves-dark">Step 3</div><br /><br />            <div class="step-new-content"><br /><br />              Finish!<br /><br />              <div class="step-actions"><br /><br />                <button class="waves-effect waves-dark btn-sm btn btn-primary m-0 mt-4" type="button">SUBMIT</button><br /><br />              </div><br /><br />            </div><br /><br />          </li><br /><br />        </ul><br /><br />      </div><br /><br />    </div></pre></div>

Please insert min. 20 characters.

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>

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

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

Yutaka

120Support score
16Questions 6Answers 4Snippets