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

我有什么：

在此处输入图像描述

我所期待的：

在此处输入图像描述

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

score 17 · Accepted Answer

17

我的解决方案： autoWidth="false"

于 2016-08-04T19:46:14.513 回答

score 14 · Accepted Answer

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

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

score 5 · Accepted Answer

我发现的唯一方法是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>

由于您将需要jQueryh:head ，因此如果您尚未使用使用它的PrimeFaces组件，则应将其添加到您的内部。

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

score 5 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

如果您按照上述某些回复所说的进行操作并将其设置为 false，那么您所做的就是与您的应用程序 css 玩轮盘赌。通过将其设置为 false，primefaces 将由您来管理宽度。您可以通过样式属性或应用程序中的某些 css 类在 selectOneMeny 上显式设置宽度。

但这不是这个问题的意义所在，这个问题是关于不为下拉菜单指定任何宽度的默认行为导致我们的下拉菜单通常对于其中的标签来说太小了。

所以我们真正想要的是让 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 文件的编译。

通常，primefaces 是在 HEAD 处渲染的。因此，如果您将 jasvacript 作为身体的最后一个元素，您应该没问题。

修补对我来说工作正常。这是我不喜欢维护的代码。

score 1 · Accepted Answer

If your p:selectOneMenu is in a DIV with an assigned width, I find setting style="width:100%;" on the p:selectOneMenu seems to work in my case.

score 1 · Accepted Answer

1

您可以通过 CSS 标识元素并更改样式宽度。使其成为其容器的 100%。

于 2013-05-28T06:58:18.870 回答

score 0 · Accepted Answer

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

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

然后定义 CSS

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

这会将 selectOneMenu 小部件的宽度设置为父元素的宽度。要让它工作，父元素的宽度不应该是“自动”。

score 0 · Accepted Answer

那些仍然对 selectonemenu 有问题的人可以试试这个

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

完美地为我工作。

css - PrimeFaces p:selectOneMenu 宽度

9 回答 9

Related

Reference