html - PrimeFaces selectOneMenu 无法内嵌到纯文本中(导致换行)-6ren

html - PrimeFaces selectOneMenu 无法内嵌到纯文本中(导致换行)

转载作者：太空宇宙更新时间：2023-11-04 13:22:23

我们需要编写帮助面板，客户认为在我们解释它们时将实际(无功能)组件嵌入/内联到帮助文本中是值得的(我同意这一点)。

这对 p:commandButton 和 p:calendar 没有问题，但是每个 p:select* 组件都会导致换行，因为生成的所有 div。

这是一个示例页面:

<?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:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>
            D E B U G
        </title>
    </h:head>

    <h:body>

        <h:outputStylesheet library="styles" name="project.css" />
        <h:outputStylesheet library="styles" name="primefaces-global.css" />

        <h:form>

            <h:panelGroup layout="block"
                          styleClass="help-panel">
                <p>
                    The refresh button
                    <p:commandButton icon="ui-icon ui-icon-refresh"
                                     value="(8)"
                                     global="false"
                                     process="@none"
                                     update="@none">
                    </p:commandButton>
                    shows a preview of the number of whatever.
                </p>
                <p>
                    The limit select box
                    <p:selectOneMenu value="#{debugManager.count}"
                                     global="false"
                                     process="@none"
                                     update="@none">
                        <f:selectItem itemValue="#{50}"  itemLabel="50" />
                        <f:selectItem itemValue="#{100}" itemLabel="100" />
                        <f:selectItem itemValue="#{200}" itemLabel="200" />
                        <f:selectItem itemValue="#{500}" itemLabel="500" />
                    </p:selectOneMenu>
                    allows you to limit the number of whatever on this page.
                </p>
            </h:panelGroup>
        </h:form>        

    </h:body>

</html>

这是非常简单的 bean:

@Named
@SessionScoped
public class DebugManager implements Serializable
{
    private static final long serialVersionUID = 1L;

    private Long count = Long.valueOf( 100 );

    public Long getCount()
    {
        return this.count;
    }

    public void setCount( Long count )
    {
        this.count = count;
    }
}

这会产生以下内容:

<?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">
    <head>
        <!-- local files saved from browser: -->
        <!--link type="text/css" rel="stylesheet" href="debug-Dateien/theme.css">
        <link type="text/css" rel="stylesheet" href="debug-Dateien/primefaces.css">
        <script type="text/javascript" src="debug-Dateien/jquery.xhtml"></script>
        <script type="text/javascript" src="debug-Dateien/primefaces.xhtml"></script-->
        <title>
            D E B U G
        </title>
    </head>
    <body>
        <form id="j_idt6" name="j_idt6" method="post" action="/cmc-compliance/debug.xhtml" enctype="application/x-www-form-urlencoded">
        <input type="hidden" name="j_idt6" value="j_idt6" />
        <div class="help-panel">
            <p>
                The refresh button
                <button id="j_idt6:j_idt9" name="j_idt6:j_idt9" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left" onclick="PrimeFaces.ab({source:'j_idt6:j_idt9',process:'@none',update:'@none',global:false});return false;" type="submit"><span class="ui-button-icon-left ui-icon ui-icon ui-icon-refresh"></span><span class="ui-button-text">(8)</span></button><script id="j_idt6:j_idt9_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_j_idt6_j_idt9',{id:'j_idt6:j_idt9'});</script>
                shows a preview of the number of whatever.
            </p>
            <p>
                The limit select box
                <div id="j_idt6:j_idt11" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix">
                    <div class="ui-helper-hidden-accessible">
                        <select id="j_idt6:j_idt11_input" name="j_idt6:j_idt11_input">
                            <option value="50">50</option>
                            <option value="100">100</option>
                            <option value="200">200</option>
                            <option value="500">500</option>
                        </select>
                    </div>
                    <label id="j_idt6:j_idt11_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label>
                    <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
                        <span class="ui-icon ui-icon-triangle-1-s"></span>
                    </div>
                    <div id="j_idt6:j_idt11_panel" class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
                        <div class="ui-selectonemenu-items-wrapper" style="height:auto">
                            <ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset">
                                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">50</li>
                                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">100</li>
                                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">200</li>
                                <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">500</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <script id="j_idt6:j_idt11_s" type="text/javascript">$(function(){PrimeFaces.cw('SelectOneMenu','widget_j_idt6_j_idt11',{id:'j_idt6:j_idt11',effect:'fade'});});</script>
                allows you to limit the number of whatever on this page.
            </p>
        </div>
        <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="601711705828338698:-3840718314813237618" autocomplete="off" />
        </form>
    </body>

</html>

结果是:

enter image description here

我尝试用 span 替换 div，但这会导致选择出现乱码且无法正常工作。

将 style="display: inline-block !important;" 添加到 div 与原来的没有什么不同:

            <div id="j_idt6:j_idt11" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-helper-clearfix" style="display: inline-block !important;">
                <div class="ui-helper-hidden-accessible" style="display: inline-block !important;">
                    <select id="j_idt6:j_idt11_input" name="j_idt6:j_idt11_input">
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="200">200</option>
                        <option value="500">500</option>
                    </select>
                </div>
                <label id="j_idt6:j_idt11_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label>
                <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right" style="display: inline-block !important;">
                    <span class="ui-icon ui-icon-triangle-1-s"></span>
                </div>
                <div id="j_idt6:j_idt11_panel" class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow" style="display: inline-block !important;">
                    <div class="ui-selectonemenu-items-wrapper" style="height:auto" style="display: inline-block !important;">
                        <ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" style="display: inline-block !important;">
                            <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">50</li>
                            <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">100</li>
                            <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">200</li>
                            <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all">500</li>
                        </ul>
                    </div>
                </div>
            </div>

问:

有没有办法让p:select*不执行“换行”？

PS:PrimeFaces 在 Mojarra 2.1.14 上的版本是 3.4.2。

最佳答案

似乎<p:selectOneMenu>正在生成一堆不必要的 div ，你为什么不使用 <h:selectOneMenu> .

或者您可以添加 .ui-selectonemenu-items-wrapper,.ui-selectonemenu-panel {display:inline}在你的风格。

关于html - PrimeFaces selectOneMenu 无法内嵌到纯文本中(导致换行)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15091662/

文章推荐： html - 显示 100% 的背景

文章推荐： C++ 计算标准差

文章推荐： c++ - strcpy_s 未处理的异常？

文章推荐： c++ - 使用 SFML 从另一个类在主窗口中绘图

c# - [纯] 函数可以抛出异常吗？
可以抛出异常的函数可以有[pure]属性吗？最佳答案根据 https://msdn.microsoft.com/en-us/library/system.diagnostics.contracts
纯 CSS 推送导航不会隐藏
我使用的是纯 css 推送导航。它工作得很好，但是我不知道如何在单击导航链接时隐藏菜单。您必须手动单击菜单图标才能使菜单返回隐藏状态。但是，当单击链接并且站点跳转到某个部分时，我希望菜单自动滑入隐藏状
纯 CSS 下拉菜单项显示
我正在尝试让纯 CSS 下拉菜单正常工作。它在很大程度上确实有效，除了其他内容似乎显示出来但我不知道为什么。 http://jsfiddle.net/uQveP/4/ 有人可以告诉我我做错了什么吗？
纯 C 中的回调函数
这个问题在这里已经有了答案: What is a "callback" in C and how are they implemented? (9 个回答) 关闭 8 年前。我正在以这种方式实现回
html - 纯 HTML 后退按钮
我想在不使用 Javascript 或任何其他语言的情况下，使用 HTML 和 CSS 创建一个 Page Back Button。我想用纯 HTML 和 CSS 来完成。我进行了搜索，但每次代码中
prolog - 纯 Prolog 中的目标顺序
我对序言很陌生。据我所知，Pure Prolog 仅限于 Horn 子句。这是一个非常简单的序言程序 - % student( Snr , FirstName , LastName ,
html - 纯 CSS 加载指示器适合容器大小
我想在加载数据时对容器使用以下加载指示器。问题是， slider 具有固定的宽度和高度(300 像素和 300 像素)，但我希望它能够动态适应容器。当我尝试添加宽度时:140px；和高度:140px
html - 纯 css 滚动阴影
当内容超过可用宽度时，我需要启用滚动阴影。这是我试图用纯 css(没有 JS)来实现的。我遇到了很多文章，可以使用 css 多背景和背景附件来实现。如果内容是文本类型，则可以使用下面的 jsfilld
regex - 纯 Lua 中功能齐全的正则表达式库
我正在编写一个上古卷轴在线插件，它由一个名为 Havok Script 的轻微修改的 Lua 5.1 引擎支持。 .这个Lua环境不允许访问os , io , package , debug模块或任何
纯 C 语言的 Arduino
我自己尝试过将 Arduino 库编译成他们自己的独立库并链接到 Eclipse 中的一个项目，但在此过程中遇到了一些问题。是否有关于如何启动和运行的体面指南？我一直很难在网上找到一个真正有效的..
javascript - 从本地存储中仅删除选定的列表项 - 纯 JS
我在这里遇到了一些麻烦。我正在尝试使用本地存储创建一个待办事项列表，但我唯一要做的就是将列表项添加到本地存储并删除所有项目从本地存储中删除，但我无法从列表中删除单个 SELECTED 项目。有人可
html - 纯 CSS 响应式文字效果
我的问题很简单。考虑以下 CodePen .是否有可能仅使用 css 就可以获得相同的结果？换句话说，如果不使用 javascrip 如何做到这一点？非常感谢! Nachos are
angularjs - 纯 angularjs 滚动事件监听器
我正在使用没有 jquery 的 angularjs，并尝试创建滚动事件监听器。尝试过这种方法: $rootScope.$watch(function() { return $windo
javascript - 纯 WebGL 虚线
我正在尝试使用纯 webgl 创建虚线。我知道这已经有一个问题，也许我很笨，但我不知道如何让它发挥作用。我理解这个概念，但我不知道如何在着色器中获取沿路径的距离。以前的答案有以下行: varying
javascript - 纯 JavaScript 工具提示
我正在尝试用纯 JavaScript 制作工具提示，显示在 hover .就像 Stack Overflow 中将鼠标悬停在配置文件名称上的一个 div显示。我尝试使用 onmouseover ,
javascript - 纯 JavaScript 添加监听器到加载的新元素
我想要通过 AJAX 将监听器添加到新元素的想法: 例如，现在我有 hello world 我为每个添加了一个监听器，但是当我通过 AJAX 加载新元素时，它没有监听器；我不完全确定问题是什么。
javascript - 各种日期的动态倒计时时钟 - 纯 Javascript
如果我错误地提出了这个问题，或者之前已经有人问过并回答过这个问题，我提前表示歉意。我的搜索发现了类似的基于 JQuery 和/或静态日期的问答，我正在寻找具有动态日期的纯 JavaScript 解决方
multithreading - 纯 Haskell 代码是否需要线程池？
在 Real World Haskell, Chapter 28, Software transactional memory ，开发了一个并发的网络链接检查器。它获取网页中的所有链接，并使用 HEA
javascript - 纯 JavaScript 将图像拖到浏览器
我正在尝试取消 jQuery-fy 一个聪明的 piece of code ，但有点太聪明了。目标是simple 。将图像从桌面拖动到浏览器。在这次 unjQueryfication 过程中，我发
javascript - 纯 Javascript end()
如何重新创建 jQuery end() $('#id') .find('.class') .css('font',f) .end() .find('.seven') .css(b,'red') 我有什

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - PrimeFaces selectOneMenu 无法内嵌到纯文本中(导致换行)