Anpassen Größe auf Schritte, um alle Felder passen

Question

Ich versuche, herauszufinden, wie ich die Hintergrundgröße basierte auf anpassen kann, was Schritt der Benutzer ist so, dass alle Felder für jeden Schritt zeigen. Ist es möglich, die Größe basierend auf welchem ​​Schritt anzupassen? Ich habe CSS und JS versucht und bin versagen und nur vollständig ruinieren das Aussehen ich wollte. Kann jemand mich leiten, wie die Hintergrundgröße hin und her, basierend auf welchem ​​Schritt zu machen, geht sie auf?

In Js habe ich versucht, das Hinzufügen somthing wie dieses

onStepChanged: function (event, currentIndex, priorIndex) 
       { 
        if (currentIndex === 2) 
        { 
         $(".wizard-big.wizard > .content").css("min-height", "530px"); 
        } 
       }, 

Oder wie folgt aus:

onStepChanged: function (event, currentIndex, priorIndex) 
       { 
        $(".wizard-big.wizard > .content").css({ 
         height: $("#div").height() 
        }); 
       }, 

HTML5

<form id="form" action="#" class="wizard-big"> 
    <h1>Employee</h1> 
     <fieldset> 
      <h2>Employee Information</h2> 

      <div class="row"> 
       <div class="col-lg-6"> 
        <div class="form-group"> 
         <label>Name</label> 
         <input id="name" name="name" type="text" class="form-control required"> 
        </div> 
       </div> 
       <div class="col-lg-6"> 
        <div class="form-group"> 
         <label>Date</label> 
         <input id="todaysDate" name="todaysDate" type="text" class="form-control required"> 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-lg-6"> 
        <div class="form-group"> 
         <label>Job Title</label> 
         <input id="title" name="title" type="text" class="form-control required"> 
        </div> 
       </div> 
       <div class="col-lg-6"> 
        <div class="form-group"> 
         <label>Department</label> 
         <input id="department" name="department" type="text" class="form-control required"> 
        </div> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-lg-6"> 
        <div class="form-group"> 
         <label>Date Hired</label> 
         <input id="hiredDate" name="hiredDate" type="text" class="form-control required"> 
        </div> 
       </div> 
       <div class="col-lg-6"> 
        <div class="form-group"> 
         <label>Termination Date</label> 
         <input id="termDate" name="termDate" type="text" class="form-control required"> 
        </div> 
       </div> 
      </div> 

     </fieldset> 
    <h1>Reasons</h1> 
    <fieldset> 
     <h2>Reason for Leaving</h2> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <div class="form-group"> 
        <label>What is your reason for leaving?</label> 
        <input id="reasonLeaving" name="reasonLeaving" type="text" class="form-control required"> 
       </div> 
      </div> 
      <div class="col-lg-12"> 
       <div class="form-group"> 
        <label>How do you feel about your pay?</label> 
        <input id="feelPay" name="feelPay" type="text" class="form-control required"> 
       </div> 
      </div> 
      <div class="col-lg-12"> 
       <div class="form-group"> 
        <label>How do you feel about your progress here?</label> 
        <input id="progressHere" name="progressHere" type="text" class="form-control required"> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-3"> 
       <div class="form-group"> 
        <label>Do you have another job?</label> 
        <input id="anotherJob" name="anotherJob" type="text" class="form-control required"> 
       </div> 
      </div> 
      <div class="col-lg-9"> 
       <div class="form-group"> 
        <label>If yes, how does it compare with ours?</label> 
        <input id="compare" name="compare" type="text" class="form-control required"> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <div class="form-group"> 
        <label>Will you be receiving a higher salary at your new job?</label> 
        <input id="higherSalary" name="higherSalary" type="text" class="form-control required"> 
       </div> 
      </div> 
      <div class="col-lg-12"> 
       <div class="form-group"> 
        <label>What could we have done to prevent your leaving?</label> 
        <input id="preventLeaving" name="preventLeaving" type="text" class="form-control required"> 
       </div> 
      </div> 
     </div> 
    </fieldset> 

JS

<script> 
    $(document).ready(function(){ 
     $("#form").steps({ 
      bodyTag: "fieldset", 
      transitionEffect: "slideLeft", 
      onStepChanging: function (event, currentIndex, newIndex) 
      { 
       // Always allow going backward even if the current step contains invalid fields! 
       if (currentIndex > newIndex) 
       { 
        return true; 
       } 

       var form = $(this); 

       // Clean up if user went backward before 
       if (currentIndex < newIndex) 
       { 
        // To remove error styles 
        $(".body:eq(" + newIndex + ") label.error", form).remove(); 
        $(".body:eq(" + newIndex + ") .error", form).removeClass("error"); 
       } 

       // Disable validation on fields that are disabled or hidden. 
       form.validate().settings.ignore = ":disabled,:hidden"; 

       // Start validation; Prevent going forward if false 
       return form.valid(); 
      }, 
      onFinishing: function (event, currentIndex) 
      { 
       var form = $(this); 

       // Disable validation on fields that are disabled. 
       // At this point it's recommended to do an overall check (mean ignoring only disabled fields) 
       form.validate().settings.ignore = ":disabled"; 

       // Start validation; Prevent form submission if false 
       return form.valid(); 
      }, 
      onFinished: function (event, currentIndex) 
      { 
       var form = $(this); 

       // Submit form input 
       form.submit(); 
      } 
     }).validate({ 
        errorPlacement: function (error, element) 
        { 
         element.before(error); 
        }, 
        rules: { 
         confirm: { 
          equalTo: "#password" 
         } 
        } 
       }); 
    }); 
</script> 

Erster Schritt

Zweiter Schritt

(zeigt Felder abgeschnitten)

Jede mögliche Hilfe bei diesem würde sehr geschätzt werden!

Answer 1

Wenn ich gut Ihr Problem verstanden, das ist eine alte Ausgabe von jquery-Schritten. Dieser Link wird eine Vielzahl von Informationen und die Auflösungen enthält: https://github.com/rstaib/jquery-steps/issues/8#issuecomment-39273777.

ich meine eigene Lösung gemacht, basierend auf den Kommentaren von diesem Link, und Sie können es verwenden, ich denke, es wird sehr gut funktionieren, wie es seit über einem Jahr für mich funktioniert.

Bitte führen Sie diese Änderungen:

1.Erstellen eine Datei mit dem Namen jquery.steps.fix.js. Setzen Sie den Code unten und laden Sie es NACH das Original jquery.steps.js (oder jquery.steps.min.js).

function resizeJquerySteps() { 
    $('.wizard .content').animate({ 
     height: $('.body.current').outerHeight() 
    }, 'slow'); 
} 

$(window).resize($.debounce(250, resizeJquerySteps)); 

2.You'll zu brauchen einige Teile des ursprünglichen jquery.steps.css ERSETZEN. Hier

(denke, es ist auf der Linie 140):

.wizard > .content 
{ 
    background: #eee; 
    display: block; 
    margin: 0.5em; 

    // comment or remove this 
    /*min-height: 35em;*/ 

    overflow: hidden; 
    position: relative; 
    width: auto; 

    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

Und hier (denke, es ist auf der Linie 163):

.wizard > .content > .body 
{ 
    float: left; 
    position: absolute; 
    width: 95%; 

    // comment or remove this 
    /*height: 95%;*/ 

    padding: 2.5%; 
} 

3.Now Sie brauchen unsere Funktion resizeJquerySteps() aufrufen aus den Ereignissen des Plugins, genau bei onInit(), onStepChanging() und onStepChanged().

onInit: function(event, currentIndex) { 
    resizeJquerySteps(); 
}, 
onStepChanging: function(event, currentIndex, newIndex) { 
    resizeJquerySteps(); 
}, 
onStepChanged: function (event, currentIndex, priorIndex) { 
    resizeJquerySteps(); 
}