Материализовать степпер

Question

Я пытаюсь использовать материализованный степпер для создания горизонтального мастера, например.

Почему-то не отображается содержимое шага и даже не получается горизонтальное.

Этоскрипка: Jsfiddle

<ul class="stepper horizontal" id="horizontal">
                    <li class="step active">
                        <div data-step-label="To step-title!" class="step-title waves-effect waves-dark">Step 1</div>
                        <div class="step-content">
                            <div class="row">
                                <div class="input-field col s12">
                                    <input name="email" type="email" class="validate" required>
                                    <label for="email">Your e-mail</label>
                                </div>
                            </div>
                            <div class="step-actions">
                                <button class="waves-effect waves-dark btn blue next-step">CONTINUE</button>
                            </div>
                        </div>
                    </li>
                    <li class="step">
                        <div class="step-title waves-effect waves-dark">Step 2</div>
                        <div class="step-content">
                            <div class="row">
                                <div class="input-field col s12">
                                    <input id name="password" type="password" class="validate" required>
                                    <label for="password">Your password</label>
                                </div>
                            </div>
                            <div class="step-actions">
                                <button class="waves-effect waves-dark btn blue next-step" data-feedback="someFunction">CONTINUE</button>
                                <button class="waves-effect waves-dark btn-flat previous-step">BACK</button>
                            </div>
                        </div>
                    </li>
                    <li class="step">
                        <div class="step-title waves-effect waves-dark">Step 3</div>
                        <div class="step-content">
                            Finish!
                            <div class="step-actions">
                                <button class="waves-effect waves-dark btn blue" type="submit">SUBMIT</button>
                            </div>
                        </div>
                    </li>
                </ul>

Answer 1

хорошо, я нашел проблему, так как в документации это не сказано или, по крайней мере, я ее не нашел

Вы должны инициализировать шаговый двигатель!

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