Smart Wizard with two steps no correct rendering

Question

For a form, I am using a smart wizard instance: https://github.com/mstratman/jQuery-Smart-Wizard.

I only have two steps right now, and it is rendered not correct. The line is longer than the second bubble. How can I fix this?

<form id="reportForm" method="post">
   <div id="reportWizard" class="form_wizard wizard_horizontal">
      <ul class="wizard_steps">
         <li>
            <a href="#step-1">
            <span class="step_no">1</span>
            <span class="step_descr">
            Schritt 1<br/>
            <small>Spielinformationen angeben</small>
            </span>
            </a>
         </li>
         <li>
            <a href="#step-2">
            <span class="step_no">2</span>
            <span class="step_descr">
            Schritt 2<br/>
            <small>Bewertung abgeben</small>
            </span>
            </a>
         </li>
      </ul>
      <div id="step-1">
         <div class="form-horizontal form-label-left">                                   
         </div>
      </div>
      <div id="step-2">
         <div class="form-horizontal form-label-left">
         </div>
      </div>
   </div>
</form>

<script>
$(document).ready(function() {
    $('#reportWizard').smartWizard({
        // Properties
        labelNext: 'Weiter', // label for Next button
        labelPrevious: 'Zurück', // label for Previous button
        labelFinish: 'Bericht anlegen', // label for Finish button
        onFinish: function() {
            document.getElementById("reportForm").submit();
        } // triggers when Finish button is clicked
    });
    $('.buttonNext').addClass('btn btn-success');
    $('.buttonPrevious').addClass('btn btn-primary');
    $('.buttonFinish').addClass('btn btn-default');
});
</script>

Answer 1

just checked your code

and tried this

<form id="reportForm" method="post">
                            <div id="reportWizard" class="form_wizard wizard_horizontal">
                                <ul class="wizard_steps">
                                    <li>
                                        <a href="#step-1">
                                            <span class="step_no">1</span>
                                            <span class="step_descr">
                                                Schritt 1<br />
                                                <small> angeben</small>
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#step-2">
                                            <span class="step_no">2</span>
                                            <span class="step_descr">
                                                Schritt 2<br />
                                                <small> abgeben</small>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                                <div id="step-1">
                                    <div class="form-horizontal form-label-left">
                                    </div>
                                </div>
                                <div id="step-2">
                                    <div class="form-horizontal form-label-left">
                                    </div>
                                </div>
                            </div>
                        </form>

and checked that long description word is not supported by smart wizard. Because if you remove "Bewertung" and "Spielinformationen" it worked.