在 p:selectOneRadio 上使用长文本时标签不对齐答案

【问题标题】：Label does not align when using long text on a p:selectOneRadio在 p:selectOneRadio 上使用长文本时标签不对齐
【发布时间】：2020-04-08 15:51:10
【问题描述】：

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

我得到的输出如下：

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

【问题讨论】：

尝试添加 style="white-space:nowrap;" 它并不完美，但它可能会有所帮助...或导致其他问题
我改进了你的标题和标签。请检查差异并牢记这些
如果不使用p:repeat，它是否有效？如果没有，请不要在代码中发布 int 。了解minimal reproducible example's。并与 css 一起玩，看看是什么解决了它。
@Kukeltje 感谢您的建议。我也有同样的问题没有 p:repeat
尝试添加这种样式：.ui-selectmanycheckbox.ui-widget td, .ui-selectoneradio.ui-widget td { display: flex; },here你可以找到支持这个功能的浏览器

标签： css jsf primefaces

【解决方案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 创建一个表，所以每个单选按钮都在一个继承表格单元格布局的单元格中。单个单选按钮基本上写为两个项目，一个 div，其中包含类型为 radio 的输入和标签。

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

现在您只需要处理最后一个最糟糕的情况：一个单词比您的行长。为此，您可以使用分词样式。在这里，您可以选择是在单词开始时（break-word）还是行尾时（break-all）开始新行，所有选项请参见here。

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

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

【讨论】：

【解决方案2】：

关键是改变css样式的初始显示：

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

【讨论】：