mercredi 5 juin 2019

Identically configured checkbox form elements produce identical HTML code but display differently

I'm simplifying my site's Registration page to make it quicker and easier for new users to register for a new user account.

I'm using Zend and PHP and I have a really strange problem:

  • 4 checkboxes, created identically
  • The first two display fine
  • The second two display in a broken format (described below)

Tried the following:

  • Moving the working checkboxes around the page - They continue to work.
  • Moving the broken checkboxes around the page - They continue to fail.
  • Refreshing browser cache.
  • Restarted apache
  • Doing a text comparison to ensure that all code is identical.

This is driving me nuts. Any help would be much appreciated!

PHP form definition:

    $this->addElement('checkbox','user_working1',array(
        'label'=>'    I am working1',
        "class"      => "form-control hoverToolTip",
        "required"   => false,
    ));



    $this->addElement('checkbox','user_working2',array(
        'label'=>'    I am working2',
        "class"      => "form-control hoverToolTip",
        "required"   => false,
    ));


    $this->addElement('checkbox','user_broken3',array(
        'label'=>'I am broken3',
        "class"      => "form-control hoverToolTip",
        "required"   => false,
    ));


    $this->addElement('checkbox','user_broken4',array(
        'label'=>'    I am broken4',
        "class"      => "form-control hoverToolTip",
        "required"   => false,          
    ));     

PHP view:

<div class="row margin-0">
    <div class="col-sm-4 col-md-3">
        <div class="">
            <h4 class="form-signin-heading">
                Professional Profile&nbsp; <i class="fa fa-briefcase"></i>
            </h4>

        </div>
    </div>
    <div class="col-sm-8 col-md-9">
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group form-group">
                        <?php echo $this->form->user_working1?> 
                    </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group form-group"> 
                        <?php echo $this->form->user_working2?> 
                    </div>
            </div>
        </div>
    </div>
</div>

<div class="row margin-0">
    <div class="col-sm-4 col-md-3">
        <div class="">
            <h4 class="form-signin-heading">
                Professional Profile&nbsp; <i class="fa fa-briefcase"></i>
            </h4>

        </div>
    </div>
    <div class="col-sm-8 col-md-9">
        <div class="row">
            <div class="col-sm-6">
                <div class="input-group form-group">
                        <?php echo $this->form->user_broken3?> 
                    </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group form-group"> 
                        <?php echo $this->form->user_broken4?> 
                    </div>
            </div>
        </div>
    </div>
</div>

HTML output:

    <div class="row margin-0">
        <div class="col-sm-4 col-md-3">
            <div class="">
                <h4 class="form-signin-heading">
                    Professional Profile&nbsp; <i class="fa fa-briefcase"></i>
                </h4>

            </div>
        </div>
        <div class="col-sm-8 col-md-9">
            <div class="row">
                <div class="col-sm-6">
                    <div class="input-group form-group">
                            <div class=" form-group "><label for="user_working1" class="optional">&nbsp;&nbsp;&nbsp;&nbsp;I am working1</label>

<input type="hidden" name="user_working1" value="0"><input type="checkbox" name="user_working1" id="user_working1" value="1" class="form-control hoverToolTip"></div> 
                        </div>
                </div>
                <div class="col-sm-6">
                    <div class="input-group form-group"> 
                            <div class=" form-group "><label for="user_working2" class="optional">&nbsp;&nbsp;&nbsp;&nbsp;I am working2</label>

<input type="hidden" name="user_working2" value="0"><input type="checkbox" name="user_working2" id="user_working2" value="1" class="form-control hoverToolTip"></div> 
                        </div>
                </div>
            </div>
        </div>
    </div>



    <div class="row margin-0">
        <div class="col-sm-4 col-md-3">
            <div class="">
                <h4 class="form-signin-heading">
                    Professional Profile&nbsp; <i class="fa fa-briefcase"></i>
                </h4>

            </div>
        </div>
        <div class="col-sm-8 col-md-9">
            <div class="row">
                <div class="col-sm-6">
                    <div class="input-group form-group">
                            <div class=" form-group "><label for="user_broken3" class="optional">&nbsp;&nbsp;&nbsp;&nbsp;I am broken3</label>

<input type="hidden" name="user_broken3" value="0"><input type="checkbox" name="user_broken3" id="user_broken3" value="1" class="form-control hoverToolTip"></div> 
                        </div>
                </div>
                <div class="col-sm-6">
                    <div class="input-group form-group"> 
                            <div class=" form-group "><label for="user_broken4" class="optional">&nbsp;&nbsp;&nbsp;&nbsp;I am broken4</label>

<input type="hidden" name="user_broken4" value="0"><input type="checkbox" name="user_broken4" id="user_broken4" value="1" class="form-control hoverToolTip"></div> 
                        </div>
                </div>
            </div>
        </div>
    </div>

Expected results:

  • All checkboxes displayed on the left hand side, followed by label on the right

Actual results:

  • 2 checkboxes working as expected
  • 2 broken checkboxes display with the Label above checkbox and the Checkbox centered in the middle of a text box



Aucun commentaire:

Enregistrer un commentaire