Layout unconfigured using Bootstrap Wizard

3

I'm running some tests with a script where the user can only go to the next step if the corresponding checkbox is checked, I got the help from @Sam to make this configuration, but now I have a layout problem, unconfigured and I confess I did not understand why. I'm using a page from a framework that I acquired that can be seen here:

SmartAdmin - Wizard

My page is like this, html

        <div class="row">
        <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
            <h1 class="page-title txt-color-blueDark"><i class="fa fa-pencil-square-o fa-fw "></i> Termo de Uso</h1>
        </div>
    </div>
    <section id="widget-grid" class=""> 
        <div class="row">
            <article class="col-sm-12 col-md-12 col-lg-6">
                <div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false" data-widget-deletebutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-check"></i> </span>
                        <h2>Termo de Adesão </h2>               
                    </header>
                    <div>
                        <div class="jarviswidget-editbox">
                        </div>
                        <div class="widget-body">               
                            <div class="row">
                                <form id="wizard-1" novalidate="novalidate">
                                    <div id="bootstrap-wizard-1" class="col-sm-12">
                                        <div class="form-bootstrapWizard">
                                          <ul class="bootstrapWizard form-wizard">
                                            <li class="active" data-target="#tab1">
                                                <a href="#tab1" data-toggle="tab"> <span class="step">1</span> <span class="title">Termo 1</span> </a>
                                            </li>
                                            <li data-target="#tab2" class="disabled">
                                                <a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Termo 2</span> </a>
                                            </li>
                                            <li data-target="#tab3" class="disabled">
                                                <a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Termo 3</span> </a>
                                            </li>
                                            <li data-target="#tab4" class="disabled">
                                                <a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Salvar</span> </a>
                                            </li>
                                        </ul>
                                            <div class="clearfix"></div>
                                        </div>

                                        <div class="tab-content">
                                            <div class="tab-pane active" id="tab1">
                                                <br>
                                                <h3><strong>Termo 1 </strong> - Uso da Internet </h3>


                                                <div class="row">                                                               
                                                    <div class="col-sm-12">                                                                 
                                                        <h3>TERMO DE AJUSTE DE PROCEDIMENTO RELATIVO AO USO DE INTERNET E SEUS ASSESSÓRIOS DENTRO DA EMPRESA</h3>
                                                        <p> A EMPRESA empresa empregadora nos termos do artigo 3º da CLT, considerando que e o acesso à Internet por ela disponibilizada em todos os seus departamentos e setores, tem a finalidade de atender exclusivamente assuntos relativos às atividades profissionais de seus funcionários junto a associados, clientes, fornecedores e assessores, INFORMA que a partir de novembro de 2013, ativará em sua rede um equipamento UTM (Unified Threat Management), que possibilitará à EMPRESA, dentre outras funções de segurança, o controle/fiscalização de todos os acessos a Internet efetuados pelos seus colaboradores, fazendo-o em nome da segurança de dados, procedimentos, proteção à sua marca e nome no mercado.</p>
                                                        <p>Serve o presente termo para dar ciência a cada um dos usuários/funcionários da introdução tecnológica de segurança ora efetivada, não podendo os precitados usuários, alegarem desconhecimento sobre o tema ora tratado.</p>
                                                        <p>O sistema implantado, não tem o fito fiscalizar e nem controlará e-mails pessoais dos trabalhadores, ficando restrito aos sítios eletrônicos acessados pelo colaborador. Para atendimento do caput do artigo 468 da CLT o funcionário/usuário aceitará eletronicamente o presente Termo.</p>
                                                        <p>O presente Termo de Ajuste, não revoga as normas relativas ao uso de Internet e seus assessórios dispostas no Regulamento Interno e Código de Ética da EMPRESA em vigor.</p>
                                                        <br />                                                                      
                                                    </div>                                                              
                                                </div>

                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input name="CheckTermo1" type="checkbox" class="checkbox style-0" id="CheckTermo1" value="0" required>
                                                                        <span>Aceito os termos do serviço</span> 
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                                                                <input class="form-control " placeholder="Data" type="text" name="datat1" id="datat1" readonly>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="tab-pane" id="tab2">
                                                <br>
                                                <h3><strong>Termo 2</strong> - Acesso a Dados</h3>

                                                <div class="row">                                                               
                                                    <div class="col-sm-12">                                                                 
                                                        <h3>TERMO DE AJUSTE DE PROCEDIMENTO RELATIVO AO USO DE INTERNET E SEUS ASSESSÓRIOS DENTRO DA EMPRESA</h3>
                                                        <p> A EMPRESA empresa empregadora nos termos do artigo 3º da CLT, considerando que e o acesso à Internet por ela disponibilizada em todos os seus departamentos e setores, tem a finalidade de atender exclusivamente assuntos relativos às atividades profissionais de seus funcionários junto a associados, clientes, fornecedores e assessores, INFORMA que a partir de novembro de 2013, ativará em sua rede um equipamento UTM (Unified Threat Management), que possibilitará à EMPRESA, dentre outras funções de segurança, o controle/fiscalização de todos os acessos a Internet efetuados pelos seus colaboradores, fazendo-o em nome da segurança de dados, procedimentos, proteção à sua marca e nome no mercado.</p>
                                                        <p>Serve o presente termo para dar ciência a cada um dos usuários/funcionários da introdução tecnológica de segurança ora efetivada, não podendo os precitados usuários, alegarem desconhecimento sobre o tema ora tratado.</p>
                                                        <p>O sistema implantado, não tem o fito fiscalizar e nem controlará e-mails pessoais dos trabalhadores, ficando restrito aos sítios eletrônicos acessados pelo colaborador. Para atendimento do caput do artigo 468 da CLT o funcionário/usuário aceitará eletronicamente o presente Termo.</p>
                                                        <p>O presente Termo de Ajuste, não revoga as normas relativas ao uso de Internet e seus assessórios dispostas no Regulamento Interno e Código de Ética da EMPRESA em vigor.</p>
                                                        <br />                                                                      
                                                    </div>                                                              
                                                </div>                                                          
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input name="CheckTermo2" type="checkbox" class="checkbox style-0" id="CheckTermo2" value="0" required>
                                                                        <span>Aceito os termos do serviço</span> 
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                                                                <input class="form-control " placeholder="Data" type="text" name="datat2" id="datat2" readonly>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>                                                          
                                            </div>                                                      
                                            <div class="tab-pane" id="tab3">
                                                <br>
                                                <h3><strong>Termo 3</strong> - Uso da Internet</h3>

                                                <div class="row">                                                               
                                                    <div class="col-sm-12">                                                                 
                                                        <h3>TERMO DE AJUSTE DE PROCEDIMENTO RELATIVO AO USO DE INTERNET E SEUS ASSESSÓRIOS DENTRO DA EMPRESA</h3>
                                                        <p> A EMPRESA empresa empregadora nos termos do artigo 3º da CLT, considerando que e o acesso à Internet por ela disponibilizada em todos os seus departamentos e setores, tem a finalidade de atender exclusivamente assuntos relativos às atividades profissionais de seus funcionários junto a associados, clientes, fornecedores e assessores, INFORMA que a partir de novembro de 2013, ativará em sua rede um equipamento UTM (Unified Threat Management), que possibilitará à EMPRESA, dentre outras funções de segurança, o controle/fiscalização de todos os acessos a Internet efetuados pelos seus colaboradores, fazendo-o em nome da segurança de dados, procedimentos, proteção à sua marca e nome no mercado.</p>
                                                        <p>Serve o presente termo para dar ciência a cada um dos usuários/funcionários da introdução tecnológica de segurança ora efetivada, não podendo os precitados usuários, alegarem desconhecimento sobre o tema ora tratado.</p>
                                                        <p>O sistema implantado, não tem o fito fiscalizar e nem controlará e-mails pessoais dos trabalhadores, ficando restrito aos sítios eletrônicos acessados pelo colaborador. Para atendimento do caput do artigo 468 da CLT o funcionário/usuário aceitará eletronicamente o presente Termo.</p>
                                                        <p>O presente Termo de Ajuste, não revoga as normas relativas ao uso de Internet e seus assessórios dispostas no Regulamento Interno e Código de Ética da EMPRESA em vigor.</p>
                                                        <br />                                                                      
                                                    </div>                                                              
                                                </div>                                                          
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <div class="checkbox">
                                                                    <label>
                                                                        <input name="CheckTermo3" type="checkbox" class="checkbox style-0" id="CheckTermo3" value="0" required>
                                                                        <span>Aceito os termos do serviço</span> 
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                                                                <input class="form-control " placeholder="Data" type="text" name="datat3" id="datat3" readonly>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>                                                          
                                            </div>  

                                            <div class="tab-pane" id="tab4">
                                                <br>
                                                <h3><strong>Step 4</strong> - Save Form</h3>
                                                <br>
                                                <h1 class="text-center text-success"><strong><i class="fa fa-check fa-lg"></i> Complete</strong></h1>
                                                <h4 class="text-center">Click next to finish</h4>
                                                <br>
                                                <br>
                                            </div>  

                                            <div class="form-actions">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <ul class="pager wizard no-margin">         
                                                            <li class="previous disabled"><a href="javascript:void(0);" class="btn btn-lg btn-default"> Anterior </a></li>                                  
                                                            <li class="next"> <a href="javascript:void(0);" class="btn btn-lg txt-color-darken"> Próximo </a> </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </article>
    </section>

O script

    pageSetUp();

var pagefunction = function() {

    loadScript("js/plugin/bootstrap-wizard/jquery.bootstrap.wizard.min.js", runBootstrapWizard);

    function runBootstrapWizard() { 

        // COMEÇO DO SCRIT
        $(document).ready(function() {

           var checks = $(".checkbox[name^=CheckTermo]");

            $('.form-bootstrapWizard').bootstrapWizard({
              onNext: function(){
                 setTimeout(function(){
                    checks.trigger("change");
                 }, 100);
                 return verifica();
              },
              onTabClick: function(){
                 return verifica();
              }
           });

           function verifica(){
              var tab_ativa = $(".tab-content .active");
              var check = tab_ativa.find(".checkbox[name^=CheckTermo]");

              if( check.is(':checked') ){
                 $(".next").removeClass("disabled");
                 $(".form-wizard .active").next().removeClass("disabled");
                 return true;
              }else{
                 $(".next").addClass("disabled");
                 $(".form-wizard .active").prev().addClass("disabled");
                 return false;
              }
           }

           checks.on("change", verifica);
           checks.trigger("change");

        });
        // FIM DO SCRIPT

        $("#CheckTermo1").click(function () {  
          if($("#CheckTermo1").is(':checked')){               
            var d = new Date();
            dataHora = (d.toLocaleString());    
            // Mostrando data no campo              
            $('#datat1').val(dataHora);                                                     
          } else {
            // Mostrando data no campo              
            $('#datat1').val("");                   
          }
        }); 

        $("#CheckTermo2").click(function () {  
          if($("#CheckTermo2").is(':checked')){               
            var d = new Date();
            dataHora = (d.toLocaleString());    
            // Mostrando data no campo              
            $('#datat2').val(dataHora);                                                     
          } else {
            // Mostrando data no campo              
            $('#datat2').val("");                   
          }
        });

        $("#CheckTermo3").click(function () {  
          if($("#CheckTermo3").is(':checked')){               
            var d = new Date();
            dataHora = (d.toLocaleString());    
            // Mostrando data no campo              
            $('#datat3').val(dataHora);                                                     
          } else {
            // Mostrando data no campo              
            $('#datat3').val("");                   
          }
        });     

        var $validator = $("#wizard-1").validate({
            rules : {                   
                CheckTermo1: {
                    required : true
                },
                CheckTermo2: {
                    required : true
                },  
                CheckTermo3: {
                    required : true
                }
            },
            messages : {                    
                CheckTermo1 : "Informe o check 1",
                CheckTermo2 : "Informe o check 2",
                CheckTermo3 : "Informe o check 3"                   
            },
            highlight : function(element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            unhighlight : function(element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorElement : 'span',
            errorClass : 'help-block',
            errorPlacement : function(error, element) {
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });

        $('#bootstrap-wizard-1').bootstrapWizard({

            'tabClass' : 'form-wizard',
            'onNext' : function(tab, navigation, index) {
                var $valid = $("#wizard-1").valid();
                if (!$valid) {
                    $validator.focusInvalid();
                    return false;
                } else {
                    $('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).addClass('complete');
                    $('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).find('.step').html('<i class="fa fa-check"></i>');
                }
            }
        });

    };

    // load fuelux wizard

    loadScript("js/plugin/fuelux/wizard/wizard.min.js", fueluxWizard);      
    function fueluxWizard() {
        var wizard = $('.wizard').wizard();
        wizard.on('finished', function(e, data) {
            $("#fuelux-wizard").submit();
            console.log("submitted!");
            $.smallBox({
                title : "Congratulations! Your form was submitted",
                content : "<i class='fa fa-clock-o'></i><i>1 seconds ago...</i>",
                color : "#5F895F",
                iconSmall : "fa fa-check bounce animated",
                timeout : 4000
            });

        });

    };

};

// end pagefunction

// Load bootstrap wizard dependency then run pagefunction
pagefunction();

The image of how the layout is with the code inserted looks like this:

Butitshouldlooklikethis:

Ithinktheproblemisinthissection,butIcouldnotsolveit,ifIcommentonthatpartthelayoutiscorrectbutthefunctionalityislost.

$('.form-bootstrapWizard').bootstrapWizard({onNext:function(){setTimeout(function(){checks.trigger("change");
             }, 100);
             return verifica();
          },
          onTabClick: function(){
             return verifica();
          }
       });
    
asked by anonymous 17.12.2018 / 13:07

1 answer

5

The problem is that the Wizard uses a default class type called nav nav-pills ( you can check in the documentation

a>).

To use the methods (which are the lines you comment on and the layout is correct), you must also change the value of the option tabClass of the component, not to not apply the classes cited, which are the cause of layout distortion.

To do this, simply add the option tabClass and leave it worthless:

$('.form-bootstrapWizard').bootstrapWizard({
   tabClass: null, // ←←←←←←←←←←←←←←←←←←←←←←←←←← AQUI
   onNext: function(){
      setTimeout(function(){
         checks.trigger("change");
      }, 100);
      return verifica();
   },
   onTabClick: function(){
      return verifica();
   }
});
    
20.12.2018 / 05:20