Идентично настроенные элементы формы флажка производят идентичный код HTML, но отображаются по-разному - PullRequest
Новая
       15

Идентично настроенные элементы формы флажка производят идентичный код HTML, но отображаются по-разному

0 голосов
/ 05 июня 2019

Screenshot of the issue Я упрощаю страницу регистрации моего сайта, чтобы новым пользователям было проще и быстрее регистрироваться для новой учетной записи пользователя.

Я использую Zend и PHPи у меня действительно странная проблема:

  • 4 флажка, созданных одинаково
  • Первые два отлично отображаются
  • Вторые два отображаются в неправильном формате (описано ниже)

Попробовал следующее:

  • Перемещение рабочих флажков по странице - они продолжают работать.
  • Перемещение неработающих флажков по странице -Они продолжают отказывать.
  • Обновление кэша браузера.
  • Перезапущенный apache
  • Выполнение сравнения текста, чтобы убедиться, что весь код идентичен.

Это сводит меня с ума.Любая помощь будет высоко ценится!

Определение формы PHP: 

    $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: 

<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: 

    <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>

.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child > .btn, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}
.input-group .form-control {
    width: 100%;
    margin-bottom: 0;
}
input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
    padding: 0;
    box-sizing: border-box;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: 100%;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
input[type="checkbox" i] {
    margin: 3px 3px 3px 4px;
}
user agent stylesheet
input[type="checkbox" i] {
    -webkit-appearance: checkbox;
    box-sizing: border-box;
}
user agent stylesheet
input[type="checkbox" i] {
    background-color: initial;
    cursor: default;
    margin: 3px 0.5ex;
    padding: initial;
    border: initial;
}
user agent stylesheet
input {
    padding: 1px 0px;
}
user agent stylesheet
input {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    cursor: text;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}
user agent stylesheet
input {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}
user agent stylesheet
input {
    -webkit-writing-mode: horizontal-tb !important;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #323232;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333333;
    background-color: #ffffff;
}
html {
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

Ожидаемые результаты:

  • Все флажки, отображаемые слева, с меткой справа

Фактические результаты:

  • 2 флажка работают должным образом
  • Отображаются 2 разбитых флажка с флажком «Метка выше» и флажок в центре текстового поля

1 Ответ

0 голосов
/ 06 июня 2019

Я нашел несколько собственных CSS, которые были написаны некоторое время назад. Пользовательский CSS применял пользовательские стили к именам элементов!

Вот почему я не мог заставить работать разбитые поля и почему рабочие поля продолжали работать.

Как вы, вероятно, уже можете сказать, я не эксперт по CSS, но я собираюсь сосредоточиться на том, чтобы привести в порядок мой CSS, чтобы применять согласованные стили к моим элементам по типу элемента и классу, а не по имени элемента.

Спасибо всем за ваши предложения и извинения, если мой вопрос был немного расстраивающим.

В любом случае, теперь все работает нормально. Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...