问在p:selectOneRadio上使用长文本时，标签不对齐
EN

Stack Overflow用户

提问于 2020-04-08 15:51:10

回答 2查看 193关注 0票数 4

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

我得到的输出如下：

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

css

jsf

primefaces

游戏安全场景解决方案

基于腾讯20余年的防护技术积累，一站式解决游戏服务端、客户端安全问题

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-07-28 11:51:00

关键是在css样式中更改显示的initial：

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

票数 1

Stack Overflow用户

发布于 2020-04-08 18:07:48

您可以覆盖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。内联块显示在同一行中，如果它们适合，否则将每个块放在一行中。Display flex可以处理这种情况，调整内容以适应空间，请参阅this以获得更好的描述。

现在你只需要处理最后一个最坏的情况:一个比你的行更长的单词。为此，您可以使用分词样式。您可以在此处选择是在单词开始时开始换行(break- word )，还是在行结束时开始(break- all )，有关所有选项，请参阅here。

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

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

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61104787

复制

(译) 如何使用 React hooks 获取 api 接口数据

react javascript node.js mapreduce

在本教程中，我想向你展示如何使用 state 和 effect 钩子在React中获取数据。你还将实现自定义的 hooks 来获取数据，可以在应用程序的任何位置重用，也可以作为独立节点包在npm上发布。