Переключатель Joomla Jform не выровнен по горизонтали с меткой - PullRequest
Новая
       17

Переключатель Joomla Jform не выровнен по горизонтали с меткой

0 голосов
/ 01 мая 2019

Я работаю над пользовательским модулем Joomla, отображающим JForm с некоторыми переключателями.Я использую пример кода, описанный для стиля Joomla 3+ с произвольными значениями, описанными здесь: https://docs.joomla.org/Radio_form_field_type

<field name="PrevVisits" type="radio" default="0" label="MOD_GNG_TOURPREF_PREV_VISITS" description="" class="btn-group">
                    <option value="Yes">MOD_GNG_TOURPREF_PREV_VISITS_YES</option>
                    <option value="Some">MOD_GNG_TOURPREF_PREV_VISITS_SOME</option>
                    <option value="No">MOD_GNG_TOURPREF_PREV_VISITS_NO</option>
</field>

Я попытался удалить тег класса, и таким образом отображаются переключатели, нокнопки и соответствующие метки расположены не по горизонтали, а под друг другом:

снимок экрана

В ответе на форуме ниже я получил следующие подсказки:

Хорошо, я вижу проблему.Если вы проверите элемент как для флажка, так и для радио, вы заметите, что вход флажка находится внутри метки, но вход радио находится перед меткой.

Флажок: 

<label for="main_Interests7" class="checkbox">
    <input type="checkbox" id="main_Interests7" name="main[Interests][]" value="language"> Sprache
</label>

Радио: 

<input type="radio" id="main_PrevVisits0" name="main[PrevVisits]" value="Yes">
<label for="main_PrevVisits0">Ja</label>

Таким образом, из-за того, что для свойства display установлено значение block, оно будет отображаться на ширине 100% в отдельной строке.

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

https://joomla.stackexchange.com/questions/24531/jform-radio-button-not-displayed-or-not-horizontally-aligned-with-its-label/24534#24534

Вот ссылка на фактическуюстраница: https://www.dev.gonativeguide.com/de/tour-preferences?tid=12

Мой вопрос заключается в том, что, исходя из вышеизложенного предположения, что мой шаблон переопределяет нормальное поведение радиоблока, как я могу понять, какая часть моего шаблона отвечает за эту проблему и что мне делать?нужно сделать, чтобы на самом деле это исправить?

Спасибо, W.

1 Ответ

0 голосов
/ 03 мая 2019

Вот два простых предложения CSS: https://codepen.io/panchroma/pen/axeKPG

/* Option 1 - horizontal */
#main_PrevVisits label{
  display:inline-block !important;
  margin-right:20px
} 


/* Option 2 - vertical */
#main_PrevVisits label{
  display:inline;
}

#main_PrevVisits label:after{
  content: "";
  display: table;
  clear: both;
}

Причина вашей проблемы в том, что CSS в строке 884 из https://www.dev.gonativeguide.com/templates/theme1990/css/bootstrap.css устанавливает 

label {
    display: block;
}

чтобы ярлыки радио не разделяли линию с переключателями.

... и чтобы ответить на ваш вопрос о том, как выяснить, какая часть вашего шаблона отвечает, веб-инспектор - ваш инструмент для устранения неполадок, подобных этому. Проверьте интересующий вас элемент, т. Е. Радиомаркировку. enter image description here

Удачи!

...