时间戳

首页 > 解决方案 > Joomla Jform 单选按钮未与其标签水平对齐

css - Joomla Jform 单选按钮未与其标签水平对齐

问题描述

我正在开发一个自定义 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>

因此，由于标签的显示属性设置为阻塞，它将以 100% 的宽度出现在单独的行上。

这些标记应该是相同的，所以我相信它是一个模板覆盖，可能已经改变了标记。

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

这是实际页面的链接： https ://www.dev.gonativeguide.com/de/tour-preferences?tid=12

我的问题是，基于上述假设，即我的模板覆盖了正常的单选框行为，我如何才能确定我的模板的哪一部分是造成此问题的原因，以及我需要做什么才能实际修复它？

谢谢，W。

标签： cssradio-buttonjoomla3.0

解决方案

这里有两个简单的 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;
}

您的问题的原因是https://www.dev.gonativeguide.com/templates/theme1990/css/bootstrap.css的第 884 行上的 CSS集

label {
    display: block;
}

所以单选标签不会与单选按钮共享线路。

...并回答您有关如何找出模板的哪一部分负责的问题，Web 检查器是您进行此类故障排除的 goto 工具。检查您感兴趣的元素，即单选标签。在此处输入图像描述

祝你好运！

推荐阅读