CODEWITHSUNDEEP
jquerytwitter-bootstrapfuelux
shin
shin

Reputation: 1681

Fuel UX wizard is not working

I just copied the example for Wizard in Fuel UX website and created an html document, also included the necessary js and css files as below.

<!DOCTYPE html>
<html lang="en">

    <head>

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" />

    </head>

    <body>

        <div id="MyWizard" class="wizard">
            <ul class="steps">
                <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
                <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
                <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
                <li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
                <li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
            </ul>
            <div class="actions">
                <button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
                <button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
            </div>
        </div>

        <div class="step-content">
            <div class="step-pane active" id="step1">This is step 1</div>
            <div class="step-pane" id="step2">This is step 2</div>
            <div class="step-pane" id="step3">This is step 3</div>
            <div class="step-pane" id="step4">This is step 4</div>
            <div class="step-pane" id="step5">This is step 5</div>
        </div>

        <script src='assets/js/jquery-1.10.2.min.js'></script>

        <script src="assets/js/bootstrap.min.js"></script>

        <script src="assets/js/fuelux/fuelux.wizard.min.js"></script>

    </body>

</html>

But its not implement wizard correctly (not render the style for wizard and the button click event is not worked), can anyone help me?

Upvotes: 1

Views: 1683

Answers (2)

Richard Esmonde
Richard Esmonde

Reputation: 1

I had an issue where the Chevroned tabs were only rendering as a bullet list. Smacked of a CSS issue. I did a view source on the Wizard example on their site, removed the fuel ux css the docs had outlined and employed the CSS for fuel ux used in their example instead. All worked!

Upvotes: 0

cbaracat
cbaracat

Reputation: 109

Try to insert the require.js. And you need to wrap the content with .fuelux class.

Maybe you will need to insert loader.min.js too

<div class="fuelux">
    <div id="MyWizard" class="wizard">
        <!-- content goes here -->
    </div>

    <div class="step-content">
        <!-- content goes here -->
    </div>
</div>

Edit

Try to put the .fuelux class on body tag.

Upvotes: 1

Related Questions