search

Kinark / Materialize-stepper

A little plugin that implements a stepper to Materializecss framework.
https://kinark.github.io/Materialize-stepper/
MIT License
227 stars 60 forks source link

Issues with horizontal stepper #77

Open ermarkar opened 5 years ago

ermarkar commented 5 years ago

HTML Code

<ul class="stepper horizontal" #contentTypeStepper style="min-height:458px">
    <li class="step active">
        <div class="step-title">Step 1</div>
        <div class="step-content">
            <p>
                Step 1 Data
            </p>
            <!-- Your step content goes here (like inputs or so) -->
            <div class="step-actions">
                <!-- Here goes your actions buttons -->
                <button class="waves-effect waves-dark btn next-step">CONTINUE</button>
            </div>
        </div>
    </li>
    <li class="step">
        <div class="step-title">Step 2</div>
        <div class="step-content">
            <p>
                Step 2 Data
            </p>
            <!-- Your step content goes here (like inputs or so) -->
            <div class="step-actions">
                <!-- Here goes your actions buttons -->
                <button class="waves-effect waves-dark btn previous-step">CONTINUE</button>
            </div>
        </div>
    </li>
</ul>

and in ts file

this.iContentTypeStepper = new MStepper(this.contentTypeStepper.nativeElement, {
            firstActive: 0 // this is the default
});

but this is not working properly.

stepper1

And on click of Step1 it changes to

stepper2

Issues 1) It is showing 2 in the first step 2) I am not able to click on any step now

Kinark commented 5 years ago

Could you please provide a jsfiddle or something? I couldn't reproduce the bug and it's working well on the docs: https://kinark.github.io/Materialize-stepper/#demos_horizontal

ermarkar commented 5 years ago

Hi, try removing waves-effect waves-dark classes from buttons.

MQS520 commented 5 years ago

Hi, I have the same problem, this is my codes.

`<!DOCTYPE html>

<html lang="en">

               ​ Document ​ ​
    ​
  •                    Step 1
                                                                     ​ ​ ​
​                        ​ ​ ​ ​ ​
  •                    Step 2                                                                      ​ ​ ​ ​                        ​ ​ ​ ​ ​
    • ​
  •                    Step 3                     ​ Finish!                        ​ ​ ​ ​
    • ​

    <script src="./js/mstepper.min.js" />

    `

    And the effect I'm showing is:

    ![image-20190909230430223](/Users/mqs/Library/Application Support/typora-user-images/image-20190909230430223.png)

    Can you show me your codes? Thinks

    josephwaiguru commented 3 years ago

    It works after adding materialize.css

    mustafabeyazbulut commented 1 year ago

    it worked for me 

    ul.stepper.horizontal .step .step-title {
    position: relative;
}