问在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

DNS解析特惠

DNS解析提供智能解析、流量调度、安全防护等服务

回答 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

复制

java – 为什么InputStream#read()返回一个int而不是一个字节？

java 编程算法

首先字节正好是8位，所以使用8位的char类型数据来与字节数据相互一一对应是最好的选择？但是为何方法InputStream#read()需要返回int类型值呢？