PrimeFaces p:selectOneMenu 宽度

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>

我有什么：

我期待的是：

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

Answer 1

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

Answer 2

我overrode .ui-selectonemenu, .ui-selectonemenu-label to：

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

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

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

所以我们真正想要的是使autoWidth工作得很好。

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

如果您喜欢primefaces 6.0源代码，则该错误位于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）比较我们的宽度计算到由primefaces建议的那个并且似乎太小了

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

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

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

Answer 6

您可以对元素进行ID，并通过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小部件的宽度设置为父元素的宽度。 要使其工作，父元素的宽度不应为“自动”。

Answer 9

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

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

完美地为我工作。

Answer 10

你可以使用类似的东西

风格=“最小宽度：12rem”