在 p:selectOneRadio 上使用长文本时标签未对齐

Question

我正在尝试使用 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>

我得到的输出如下：

如您所见，我的标签与最后一个单选按钮相关联，但未与所有其他单选按钮对齐。有办法解决这个问题吗？

Answer 1

您可以覆盖 Primefaces 样式来实现这一点（查看此处 How do I override default PrimeFaces CSS with custom styles? 以获取完整说明）：

<?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创建一个 table，因此每个单选按钮都位于继承 table 单元格布局的单元格中。单个单选按钮基本上写为两个项目，一个 div，其中包含类型为 radio 的输入和标签。

这两个标签都继承了 pf css 的行内块显示。行内块如果适合则显示在同一行，否则它们将每个放在一行。 Display flex 可以管理这种情况，使内容适应 space，请参阅 this 以获得更好的描述。

现在您只需要处理最后一个最糟糕的情况：一个单词比您的台词还长。为此，您可以使用分词样式。在这里您可以选择是否要在单词开头 (break-word) 或到达行尾 (break-all) 时开始新行，请参阅 here 了解所有选项。

我认为总是有不同的方法来实现布局，css，所以尝试一些指南并测试不同的方法以继续学习。

如果你愿意，Primefaces 也有一个面向多平台的版本，响应迅速等等，你可以在这里看到更多 PrimeNG

Answer 2

关键是在 css 样式中更改初始显示：

body .ui-selectmanycheckbox.ui-widget label, body .ui-selectoneradio.ui-widget label {
    display: initial;
    vertical-align: middle;
    margin-top: 0;
}

在 p:selectOneRadio 上使用长文本时标签未对齐

Label does not align when using long text on a p:selectOneRadio

css

jsf

primefaces