在p:selectOneRadio上使用长文本时，标签不对齐 [英] Label does not align when using long text on a p:selectOneRadio
问题描述
我正在尝试使用JSF和primefaces实现一个简单的接口. 我需要一个问题列表，对于每个问题，用户都可以在不同选项之间进行选择.这些选项很长，我对单选按钮的分配有疑问.
I'm trying to implement a simple interface using JSF and primefaces. I need a list of questions and, for each question, the user will be able to choose between different options. These options are quite long and I have problem with the allignement of the radio button.
其中一个问题的代码如下:
The code for one of the questions is the following:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h:form>
<div class="ui-g">
<div class="ui-g-1"></div>
<div class="ui-g-10">
<p:panelGrid columns="1" layout="grid"
styleClass="showcase-text-align-center">
<h2>Domanda 1</h2>
<p:selectOneRadio id="domanda1" layout="pageDirection">
<f:selectItem itemLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " itemValue="1" />
<f:selectItem itemLabel="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." itemValue="2" />
<f:selectItem itemLabel="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur." itemValue="3" />
<f:selectItem itemLabel="Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium" itemValue="4" />
</p:selectOneRadio>
</p:panelGrid>
</div>
</div>
</h:form>
</h:body>
</html>
我得到的输出如下:
如您所见，我具有与最后一个单选按钮相关联的标签，该标签与所有其他单选按钮均未对齐.有办法解决这个问题吗?
As you can see, I have the label associated with the last radio button that is not aligned with all the others. Is there a way to solve this problem?
推荐答案
关键是要更改CSS样式的初始显示:
The key is to change in the css style the display for initial:
body .ui-selectmanycheckbox.ui-widget label, body .ui-selectoneradio.ui-widget label {
display: initial;
vertical-align: middle;
margin-top: 0;
}
这篇关于在p:selectOneRadio上使用长文本时，标签不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
