PrimeFaces p：selectOneMenu宽度

Posted 2021-05-04

我希望p:selectOneMenu宽度对于父细胞是自动的，而不是关于它具有的值。

<p:panelGrid>
    <p:row>
        <p:column><p:outputLabel value="Value01" for="idInput01"/></p:column>
        <p:column><p:inputText  value="#{bean.input01}" id="idInput01" /></p:column>
        <p:column><p:outputLabel value="Value02" for="idSelect" /></p:column>
        <p:column>
            <p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter">
                <f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="#{varObject.label}" itemValue="#{varObject}" />
            </p:selectOneMenu>
        </p:column>
    </p:row>
</p:panelGrid>

我得到了什么：

我期待的是：

注意：我不想指定固定宽度。

答案

我重写qazxsw poi：

.ui-selectonemenu, .ui-selectonemenu-label

另一答案

我的解决方案：autoWidth =“false”

另一答案

我找到的唯一方法是使用.ui-selectonemenu{ width: 100% !important; } .ui-selectonemenu-label{ width: 100% !important; } 在加载时初始化宽度。

你可以简单地创建一个像这样的CSS类（只是用作未来选择器）：

jQuery

并将其添加到您的组件：

.full-width
{

}

由于您需要jQuery，如果您尚未使用使用它的PrimeFaces组件，则应在<p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter" styleClass="full-width"> <f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="{varObject.label}" itemValue="#{varObject}" /> </p:selectOneMenu> 中添加它。

h:head

这是一个初始化选择器中所有p：selectOneMenu的小脚本：

<h:outputScript library="primefaces" name="jquery/jquery.js" />

另一答案

您可以直接在组件中添加width值来修改它，以避免影响页面中存在的其他p：selectOneMenu。

<script>
    $(document).ready(
        function()
        {
            $("div.ui-selectonemenu.full-width").each(
                function()
                {
                    $(this).css("width",$(this).parent().width());
                }
            );
        }
    );
</script>

另一答案

我现在有一个适当的解决方案。

Primefaces 6.0现在有一个名为autoWidth的新字段，默认情况下设置为true，您可以设置为false。

如果您按照以上某些回复说并将其设置为false，那么您所做的就是与您的app css一起玩轮盘赌。通过将其设置为false，primefaces将由您来管理宽度。您可以通过style属性明确地在selectOneMeny上设置宽度，或者在应用程序中使用某些css类。

但这不是这个问题的关键，这个问题是关于这样一个事实，即没有为下拉列表指定任何宽度的默认行为导致我们的下降通常对于那里的标签而言太小。

所以我们真正想要的是自动宽度正常工作。

最后，我查看了组件和渲染器，很明显自动宽度机制在后端不起作用。后端端只构建一些类似JSON的数据，这些数据可以使用primefaces javascript构建器来正确地在浏览器上调整窗口小部件的行为。

如果你看看primefaces 6.0源代码，那么这个bug就在META-INF resources primefaces forms中

搜索说明以下内容的代码：

PrimeFaces SelectOneMenu小工具

在这个javascript函数中寻找代码块，它说：

<p:selectOneMenu  style="width: 100% !important">
...
</p:selectOneMenu>

在这部分代码中，您的错误是以下行：

_render: function() {
        if(this.cfg.autoWidth) {

在这里，我应用了以下补丁，希望能够使下拉框与最大标签一样胖：

this.jq.css('min-width', this.input.outerWidth());

上面代码的想法是：（a）用所有标签查看隐藏的div并获得div的宽度（b）将这个长度增加到这个长度所需的宽度三角形面向下的宽度（c）比较我们的宽度计算到由primefaces建议的那个并且似乎太小了

注意：要安装补丁，您必须复制SelectOneWidget的所有Primaces代码。将其添加到您控制下的javascript文件中。确保只在加载了primefaces javascript文件后才运行javascript文件的编译。

通常在HEAD处呈现主要面。因此，如果您将javascript作为正文中的最后一个元素，那么您应该没问题。

补丁对我来说很好。这是我不喜欢维护的代码。

另一答案

您可以对元素进行ID，并通过CSS更改样式宽度。使其100％的容器。

另一答案

如果你的 _render: function() { if(this.cfg.autoWidth) { // BEGIN: PATCHING // ORIGINAL CODE: // this.jq.css('min-width', this.input.outerWidth()); // BUGFIX: // (a) compute the original min-with primefaces 6.0 would put on the root div var primefacesBugWidth = this.input.outerWidth(); // (b) compute the length of the hidden select element with all the labels inside of it var widthOfHiddenDivWithSelectLabels = this.jq.find('div select').width(); var widthOfTheDropDownTriangle = this.jq.find('.ui-selectonemenu-trigger.ui-state-default.ui-corner-right').width(); var widthOfLabelPlusTraingle = widthOfHiddenDivWithSelectLabels + widthOfTheDropDownTriangle; // (c) we will use whichever length is longer // in bug-fixed primefaces version the outerWidth should be computed correctly // but this seems not to be the case var maxWidthOfTwoPossibleOptions = primefacesBugWidth > widthOfLabelPlusTraingle ? primefacesBugWidth : widthOfLabelPlusTraingle; this.jq.css('min-width', maxWidthOfTwoPossibleOptions); // END: PATCHING } } 是在指定宽度的DIV中，我发现在p:selectOneMenu上设置style="width:100%;"似乎适用于我的情况。

另一答案

问题可能是min-width，它是在呈现的html中设置的。如果是这种情况，请使用CSS选择器固定宽度，如下所示：

p:selectOneMenu

然后定义CSS

<p:selectOneMenu styleClass="fixed-width" ...

这会将selectOneMenu小部件的宽度设置为父元素的宽度。为了使它工作，父元素的宽度不应该是'auto'。

另一答案

那些仍然有选择菜单问题的人可以试试这个

.fixed-width { min-width: 100% !important; }

完美地为我工作。