我正在使用jqxValidator来验证一组单选按钮。当红色消息(即标签)出现在行下方时,它将继承第一列的宽度,从而破坏设计:
我尝试了很多方法,最后改变标签的显示修复了表格布局,但是消息被分成了两行。
有没有办法扩展标签的宽度以使用整个表格宽度?
示例:https://codepen.io/lhernand/pen/OEZbXb
HTML:
<table style="border:0; border-collapse:collapse; " width="100%">
<tbody>
<tr class="rowRequired jqx-validator-error-element" id="optionsID0EYE">
<td style="border:0; width:50%; "><input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span></td>
<td style="border:0; width:50%; "><input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span></td>
</tr><label class="jqx-validator-error-label" style="position: relative; left: 0px; width: 304.688px; top: 2px;">Please choose one option!</label>
</tbody>
</table>
注意:它应该可以在IE11中工作
发布于 2018-06-22 11:52:09
由于jquery验证器会在表中的td之后插入一个标签,因此该元素的行为就像td一样,在同一行上没有匹配项。
使用chrome dev tools选项复制检查器上的选择器,我可以为您拥有的html结构获得最具体的选择器,因此对此元素应用200%的大小,可以使表不会出错。
#tablePatientDetailsContainer > tbody > tr:nth-child(1) > td > table > tbody > tr > td:nth-child(2) > table > tbody > label{
width: 200% !important;
box-sizing: border-box;
}
在Chrome、FF和Safari上测试
我的工作代码https://codepen.io/Teobis/full/vrjZVR/
希望这能有所帮助
发布于 2018-06-22 08:00:53
您将id optionsID0EYE
放在了错误的位置。jqxValidator将为具有此id的元素创建一个同级元素。你需要这样做:
<tbody>
<tr class="rowRequired">
<div id="optionsID0EYE" style="display: flex; flex-wrap: wrap">
<div style="width: 50%">
<input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span>
</div>
<div style="width: 50%">
<input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span>
</div>
</div>
</tr>
</tbody>
我将id optionsID0EYE
移到了自己制作的新div
中。
https://stackoverflow.com/questions/50978646
复制相似问题