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!


Topic: Stepper pro not displaying input fiels

csax free asked 5 years ago


**Expected behavior** A working example of yours embedded in my web page

**Actual behavior** Inputs do not show up and control buttons do not work - Added reference to stepper.min.js- - Added reference to stepper.min.css - copied you code from web page (div and ul from horizontal and vertical) Am I missing another include? I tried all of the pro examples. They all reacted the same where inputs not showing up and control not working **Resources (screenshots, code snippets etc.)**

https://mdbootstrap.com/docs/jquery/components/stepper/#!

<div class="row mt-1">
    <div class="col-md-12">
        <!-- Vertical Steppers -->
        <div class="row mt-1">
            <div class="col-md-12">

                <ul class="stepper parallel">
                    <li class="step active">
                        <div data-step-label="Just add a data-step-label!" 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-parallel" name="email" type="email" class="form-control validate" required>
                                    <label for="email-parallel">Your e-mail</label>
                                </div>
                            </div>
                            <div class="step-actions">
                                <button class="waves-effect waves-dark btn btn-sm btn-primary next-step">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-parallel" type="password" class="form-control validate" required>
                                    <label for="password-parallel">Your password</label>
                                </div>
                            </div>
                            <div class="step-actions">
                                <button class="waves-effect waves-dark btn-sm btn btn-primary next-step">CONTINUE</button>
                                <button class="waves-effect waves-dark btn-sm btn 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>

        <!-- Steppers Navigation -->
        <div class="row mt-1">
            <div class="col-md-12 text-right">
                <button class="btn btn-flat btn-sm">Cancel</button>
                <button class="btn btn-primary btn-sm">Next</button>
            </div>
        </div>
        <!-- /.Vertical Steppers -->
    </div>
</div>

MDBootstrap staff commented 5 years ago

Hi csax,

You didn't mention js initialization code:

$(document).ready(function () { $('.stepper').mdbStepper(); })

Did you use that after references?


csax free answered 5 years ago


Never mind this issue, the call was there just not in the snippet. But I found the cause! You need to make sure you get the includes and the javascript perfectly in the right place. No problem when you are working on single side pages....

With below order it works perfectly fine. In a fragmented web page environment it's sometimes hard to track at what position what include or javascript is. But as long as you ensure the stepper include is before the javascript it works fine.

$(document).ready(function () { $('.stepper').mdbStepper(); })

Thanks Chris


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.4
  • Device: Computer
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: Yes