在 ap:selectOneRadio 上使用长文本时标签不对齐
Pao*_*ast 4 css jsf primefaces
我正在尝试使用 JSF 和 primefaces 实现一个简单的接口。我需要一个问题列表，对于每个问题，用户将能够在不同的选项之间进行选择。这些选项很长，我对单选按钮的对齐有问题。
其中一个问题的代码如下：
<?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>
我得到的输出如下：
如您所见，我有与最后一个单选按钮相关联的标签，该标签未与所有其他按钮对齐。有没有办法解决这个问题？
您可以覆盖 Primefaces 样式来实现这一点（查看此处如何使用自定义样式覆盖默认的 PrimeFaces CSS？有关完整说明）：
<?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>
<style>
.ui-selectmanycheckbox.ui-widget td, .ui-selectoneradio.ui-widget td {
display: flex;
}
.ui-selectoneradio label {
word-break: break-all;
}
</style>
</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 laudantiumExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteurExcepteur"
itemValue="4" />
</p:selectOneRadio>
</p:panelGrid>
</div>
</div>
</h:form>
</h:body>
</html>
我建议你也检查caiuse，以浏览所用功能的兼容性。
这是发生了什么（请注意，实际行为可能取决于 pf 版本，如果您使用的是特定主题，这里我以 pf 6.2 中的 components.css 为例）： Primefaces selectOneRadio 创建一个表，因此每个收音机按钮位于继承表格单元格布局的单元格中。单个单选按钮基本上写为两个项目，一个 div，包含类型为 radio 的输入和标签。
这两个标签都从 pf css 继承了内联块显示。如果合适，内联块将显示在同一行中，否则它们将每个放在一行上。Display flex 可以管理这种情况，使内容适应空间，请参阅此以获得更好的描述。
现在您只需要处理最后一个最糟糕的情况：一个单词比您的行长。为此，您可以使用分词样式。您可以在此处选择是在单词开始时开始新行 (break-word)，还是到达行尾时 (break-all)，请参阅此处了解所有选项。
我认为使用 css 总是有不同的方式来实现布局，所以尝试一些指南并测试不同的方法来继续学习。
如果你愿意，Primefaces 也有一个面向多平台的版本，所以反应灵敏等，你可以在这里看到更多PrimeNG