Question

我希望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>

我得到了什么：

enter image description here

我期待的是什么：

enter image description here

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

Answer 1

我覆盖 .ui-selectonemenu, .ui-selectonemenu-label：

.ui-selectonemenu{
     width: 100% !important;
}
.ui-selectonemenu-label{
     width: 100% !important;
}

Answer 2

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

Answer 3

我找到的唯一方法是使用jQuery在加载时初始化宽度。

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

.full-width
{

}

并将其添加到您的组件中：

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

由于您需要 jQuery ，如果您尚未使用 PrimeFaces 组件，则应在h:head内添加此内容。

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

以下是初始化选择器中所有p：selectOneMenu的小脚本：

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

Answer 4

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

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

Answer 5

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

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

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

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

所以我们真正想要的是让autoWidth顺利工作。

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

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

中

搜索以下内容的代码：

PrimeFaces SelectOneMenu小工具

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

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

在这部分代码中，您的错误如下：

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

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

 _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
        }        
    }

上面代码的想法是：（a）用所有标签查看隐藏的div并获得该div的宽度（b）将曲面三角形朝下所需的宽度加到该长度上（c）将我们计算的宽度与主要建议的宽度进行比较，这似乎太小了

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

通常在HEAD处呈现主要面。所以，如果你有jasvacript作为身体的最后一个，你应该没事。

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

Answer 6

您可以通过CSS识别元素并更改样式宽度。使其100％的容器。

Answer 7

如果您的p:selectOneMenu位于指定宽度的DIV中，我发现style="width:100%;"上的设置p:selectOneMenu似乎适用于我的情况。

Answer 8

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

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

然后定义CSS

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

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

Answer 9

那些仍然遇到selectonemenu问题的人可以试试这个

.ui-selectonemenu {
    min-width: 0 !important;
}

对我来说非常有效。

PrimeFaces p：selectOneMenu宽度

9 个答案: