Git Product home page Git Product logo

bootstrap-wizard's Issues

Navigation Widths not sizing properly in JS

Since the script is finding just 'li" in the document, and I have other 'li's' in my content, the script is reading all of the 'li' elements and sizing accordingly, leaving my navigation hover severely smaller than it should be. I tried putting a class on the li's for the navigation in order to separate this li from the others I have in the content, but it's not working. Any suggestions?

IRT:
onInit: function(tab, navigation, index) {

        //check number of tabs and fill the entire row
        var $total = navigation.find('li').length;
        $width = 100 / $total;
        var $wizard = navigation.closest('.wizard-card');

        $display_width = $(document).width();

        if ($display_width < 600 && $total > 3) {
            $width = 50;
        }

        navigation.find('li').css('width', $width + '%');
        $first_li = navigation.find('li:first-child a').html();
        $moving_div = $('<div class="moving-tab">' + $first_li + '</div>');
        $('.wizard-card .wizard-navigation').append($moving_div);
        refreshAnimation($wizard, index);
        $('.moving-tab').css('transition', 'transform 0s');
    },

Background image resizing issue

Hi! When resizing the window, the background image doesn't cover completely at the bottom.

screen shot 2016-11-16 at 4 38 17 am

I would recommend the following:

  1. Remove the inline style at <div class="image-container set-full-height" style="background-image: url('assets/img/wizard.jpg')">
  2. And put a block style as
<style>
        body {
            background: url('assets/img/wizard.jpg') no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
</style>

It worked for me.

NavBar Movement Distorts Upon Inserting Text Editor Plugin

Hello,

I currently am running into an issue where the navbar's movement distorts upon switching to a panel that has my custom text editor on it. When I remove the text editor from my html, the wizard returns back to it's normal state. I am using the text editor plugin, summernote.

The tab for the middle view (the one that is causing the issue) is in a partial view.
capturewizard

        '<div class="col-md-10">
            <textarea id="taBody"></textarea> @* This is where the text editor is loaded, displays fine when this line is removed.*@
        </div>
        <div class="col-md-2">
            <input type="button" id="editBody" onclick="bodyEditor()" class="btn btn-default" value="Edit" />
            <input type="button" id="saveBody" onclick="bodySave()" class="btn btn-default" value="Save" />
        </div>'

Any thoughts on what may be happening? Thanks!

I have added the Input field but not getting the error message..

//code for validator
// Code for the Validator
var $validator = $('.wizard-card form').validate({
rules: {
firstname: {
required: true,
minlength: 3
},
lastname: {
required: true,
minlength: 3
},
password : {
required: true,
minlength: 5
},
email: {
required: true,
minlength: 3,
}
}
});
//wizar card for input fields




                  <div class="wizard-header">
                      <h3>
                         <b>Sign up</b> <br>
                      </h3>
                  </div>
                        <div class="tab-pane" id="details">
                          <div class="row">
                              <h4 class="info-text"> Let's start with the basic informations</h4>
                              
                              <div class="col-sm-6 col-sm-offset-1">
                                  <div class="form-group">
                                    <label>First Name <small>(required)</small></label>
                                    <input name="firstname" type="text" class="form-control" placeholder="First Name">
                                  </div>
                                  <div class="form-group">
                                    <label>Last Name <small>(required)</small></label>
                                    <input name="lastname" type="text" class="form-control" placeholder="Last Name">
                                  </div>
                                   <div class="form-group">
                                    <label>Password <small>(required)</small></label>
                                    <input name="password" type="password" class="form-control" placeholder="Enter Password">
                                  </div>
                                  <div class="form-group">
                                      <label>Email <small>(required)</small></label>
                                      <input name="email" type="email" class="form-control" placeholder="[email protected]">
                                  </div>
                              </div>
                          
                          </div>

                           <button name="submit" type="submit" class="btn btn-success" style="margin-left: 40px;
margin-top: 39px;"><i class="icon-save icon-large"></i>&nbsp;Sign Up</button>
                        </div>
                        </form>      
        </div> <!-- wizard container -->
    </div>[

screenshot
](url)

Please create a React version of this

Hello and thank you for this great looking wizard, It would be really nice to have a React version of this.
The react-wizard is not quite this good looking unfortunately

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.