blocks|key|3084403|text|您可以通过CSS标识元素并更改样式宽度。把它变成100%25的容器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3084404|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can ID the element and change the style width through CSS. Make it 100% of its container.

blocks|key|3084418|text|我发现的唯一方法是在加载时使用jQuery初始化宽度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3084419|您可以简单地创建这样一个CSS类(仅用作futur+选择器)：|BOLD|3084420|.full-width
{

}|code-block|syntax|javascript|3084421|并将其添加到组件中：|3084422|<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>|3084423|由于您将需要jQuery，所以如果您还没有使用使用它的PrimeFaces组件，则应该将其添加到h:head中。|3084424|<h:outputScript+library="primefaces"+name="jquery/jquery.js"+/>|3084425|下面是在选择器中初始化所有p:selectOneMenu的小脚本：|3084426|<script>
++++$(document).ready(
++++++++function()
++++++++{
++++++++++++$("div.ui-selectonemenu.full-width").each(
++++++++++++++++function()
++++++++++++++++{
++++++++++++++++++++$(this).css("width",$(this).parent().width());
++++++++++++++++}
++++++++++++);
++++++++}
++++);
</script>|3084427|entityMap^0|F|6|0|Q|3|0|0|0|0|6|6|R|A|1C|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|17|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|18|8|@]|D|@]|E|$]]|$1|P|3|Q|5|K|7|19|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1A|8|@$9|1B|A|1C|B|H]|$9|1D|A|1E|B|H]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|T|3|U|5|K|7|1H|8|@]|D|@]|E|$L|M]]|$1|V|3|W|5|6|7|1I|8|@]|D|@]|E|$]]|$1|X|3|Y|5|K|7|1J|8|@]|D|@]|E|$L|M]]|$1|Z|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|10|$]]

The only way I found is to use <code>jQuery</code> to initialize width at load time.

You can create simply a CSS class like this (just to be used as a futur selector) :

<pre><code>.full-width
{

}
</code></pre>

And add it to your component :

<pre><code>&lt;p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter" styleClass="full-width"&gt;
 &lt;f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="{varObject.label}" itemValue="#{varObject}" /&gt;
&lt;/p:selectOneMenu&gt;
</code></pre>

Since you will need jQuery, you should add this inside your <code>h:head</code> if you are not already using PrimeFaces components that use it.

<pre><code>&lt;h:outputScript library="primefaces" name="jquery/jquery.js" /&gt;
</code></pre>

Here is the small script that initialize all p:selectOneMenu in the selector :

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

blocks|key|3279101|text|i凌驾+.ui-selectonemenu,+.ui-selectonemenu-label到：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|3279102|.ui-selectonemenu{
+++++width:+100%25+!important;
}
.ui-selectonemenu-label{
+++++width:+100%25+!important;
}++|code-block|syntax|javascript|3279103|entityMap^0|0|3|4|16|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|S|8|@]|E|@]|F|$J|K]]|$1|L|3|-4|5|6|7|T|8|@]|E|@]|F|$]]]|M|$]]

i overrode <code>.ui-selectonemenu, .ui-selectonemenu-label</code> to:

<pre><code>.ui-selectonemenu{
 width: 100% !important;
}
.ui-selectonemenu-label{
 width: 100% !important;
} 
</code></pre>

blocks|key|2245154|text|如果您的p:selectOneMenu位于指定宽度的DIV中，我发现在p:selectOneMenu上设置style="width:100%25;"似乎适用于我的情况。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2245155|entityMap^0|4|F|Z|F|1H|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|3279133|text|您可以直接在组件中添加宽度值以修改它，以避免影响页面中存在的其他p:+selectOneMenu。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3279134|<p:selectOneMenu++style="width:+100%25+!important">
...
</p:selectOneMenu>|code-block|syntax|javascript|3279135|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you can add the value of width directly in the component to modify it, to avoid impacting other p: selectOneMenu existing in the page.

<pre><code>&lt;p:selectOneMenu style="width: 100% !important"&gt;
...
&lt;/p:selectOneMenu&gt;
</code></pre>

blocks|key|3084495|text|我的解决方案:autoWidth=“假”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3084496|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

blocks|key|2245249|text|我现在有了一个适当的解决办法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2245250|PrimeFaces6.0现在有一个名为autoWidth的新字段，默认设置为true，您可以将其设置为false。|2245251|如果你做了上面的一些反应，并将其设置为假，你所做的只是玩轮盘赌你的应用程序css。通过将其设置为false，primefaces将留给您来管理宽度。您可以通过样式属性明确地在selectOneMeny上设置宽度，也可以在应用程序中设置某些css类。|2245252|但这不是这个问题的问题，这个问题是关于这样一个事实，即默认的行为--没有指定任何宽度--使我们的下拉式下降对标签来说通常太小。|2245253|所以我们真正想要的是让autoWidth更好地工作。|2245254|FInally，我查看了组件和渲染器，很明显，自动宽度机制在后端不起作用。后端端只构建一些类似于JSON的数据，可以使用这些数据在浏览器上正确地调优小部件的行为。|2245255|如果您查看PrimeFaces6.0源代码，则bug位于META\resources\+primefaces+\forms中。|2245256|搜索下列代码：|2245257|PrimeFaces+SelectOneMenu+Widget
|blockquote|2245258|2245259|在这个javascript函数中，搜索如下代码块：|2245260|_render:+function()+{
++++++++if(this.cfg.autoWidth)+{|code-block|syntax|javascript|2245261|在本节代码中，您的bug是以下一行：|2245262|this.jq.css('min-width',+this.input.outerWidth());|2245263|在这里，我应用了下面的修补程序，希望它能够在获取下拉框时起作用，使其与最大的标签相同：|2245264|+_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+%2B+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
++++++++}++++++++
++++}|2245265|以上代码的思想是：(a)查看带有所有标签的隐藏div，并获得该div+(b)的宽度，再加上朝下的素数面三角形所需的宽度(c)，将我们计算的宽度与素数面建议的宽度进行比较，这似乎太小了。|2245266|注意:要安装修补程序，您必须复制SelectOneWidget的所有Primaces代码。将其添加到您控制的javascript文件中。确保只在加载了primefaces文件之后才运行javascript文件的编译。|2245267|通常情况下，原始面在头部呈现。所以，如果你把你作为身体中的最后一剂，你应该会没事的。|2245268|修补工作对我来说很好。然而，THis是我不喜欢维护的代码。|2245269|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1J|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1K|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1L|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1M|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1N|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1O|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1P|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1Q|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1S|8|@]|9|@]|A|$]]|$1|V|3|W|5|X|7|1T|8|@]|9|@]|A|$Y|Z]]|$1|10|3|11|5|6|7|1U|8|@]|9|@]|A|$]]|$1|12|3|13|5|X|7|1V|8|@]|9|@]|A|$Y|Z]]|$1|14|3|15|5|6|7|1W|8|@]|9|@]|A|$]]|$1|16|3|17|5|X|7|1X|8|@]|9|@]|A|$Y|Z]]|$1|18|3|19|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|20|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|21|8|@]|9|@]|A|$]]|$1|1G|3|-4|5|6|7|22|8|@]|9|@]|A|$]]]|1H|$]]

I now have a proper fix for this.

Primefaces 6.0 now has a new field called autoWidth that by default is set to true, and you can set to false.

IF you do as some of the above responses say and set it to false, all you are doing is playing roulette with you app css.
By setting it to false, primefaces will leave it up to you to manage the width.
You can either have the width set on the selectOneMeny expliclitly by style attribute, or some css class in your application.

But this is not what this issue is about, this issue is about the fact that the default behaivor of not specifying any width to a drop down makes leads our drop downs to normally be way too small for the labels in there.

So what we actually want is for the autoWidth to work proplerly.

FInally, I looked at the component and at the renderer, and it is obvious the auto-width mechanism does not work in the backend side.
The backend side only builds some JSON like data that the primefaces javascript builder can use to properly tune on the browser the behavior of the widget.

If you loook at primefaces 6.0 source code, the bug is in META-INF\resources\primefaces\forms 

Search for the code that says the following:

<blockquote>
 PrimeFaces SelectOneMenu Widget
</blockquote>

In this javascript function hunt for the code chunk that says:

<pre><code>_render: function() {
 if(this.cfg.autoWidth) {
</code></pre>

In this section of code your bug is the following line:

<pre><code>this.jq.css('min-width', this.input.outerWidth());
</code></pre>

Here, I applied the following patch that hopefully should work in geting the drop down box to be as fat as the largest label:

<pre><code> _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 &gt; widthOfLabelPlusTraingle ? primefacesBugWidth : widthOfLabelPlusTraingle;
 this.jq.css('min-width', maxWidthOfTwoPossibleOptions);
 // END: PATCHING
 } 
 }
</code></pre>

The idea of the code above is:
(a) look at the hidden div with all labels and get the width of that div
(b) add to that length the width needed for the primefaces triangle facing down
(c) compare the width we have computed to that that is suggested by primefaces and that seems to be way too small

NOTE:
To install the patch you have to copy all of the Primaces code for the SelectOneWidget.
Add it to a javascript file under your control.
Make sure you only run the compilation of your javascript file after the primefaces javascript file has been loaded.

Normally primefaces is being rendered at the HEAD.
So if you have you jasvacript as the last ement in the body you should be fine.

The patching is working fine for me.
THis is code I do not like to maintain however.

blocks|key|2245271|text|问题可能是最小宽度，这是在呈现HTML中设置的.如果这是您的情况，请使用CSS选择器固定宽度如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2245272|<p:selectOneMenu+styleClass="fixed-width"+...|code-block|syntax|javascript|2245273|然后定义CSS|2245274|.fixed-width+{+min-width:+100%25+!important;+}|2245275|它将selectOneMenu小部件的宽度设置为父元素的宽度。要使其工作，父元素的宽度不应该是“自动”。|2245276|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

The problem might be min-width, which is set in the rendered HTML. If that is your case, use a CSS selector fixed-width like this:

<pre><code>&lt;p:selectOneMenu styleClass="fixed-width" ...
</code></pre>

then define CSS

<pre><code>.fixed-width { min-width: 100% !important; }
</code></pre>

That sets the width of the selectOneMenu widget to the width of the parent element. To have it work, parent elements's width should not be 'auto'.

blocks|key|3279252|text|那些仍然有问题的人可以试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3279253|.ui-selectonemenu+{
++++min-width:+0+!important;
}|code-block|syntax|javascript|3279254|对我来说很完美。|3279255|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Those who still got problem with selectonemenu may try this

<pre><code>.ui-selectonemenu {
 min-width: 0 !important;
}
</code></pre>

Perfectly worked for me.

I want <code>p:selectOneMenu</code> width to be auto regarding to the parent cell not regarding to the values it has.

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

What I've got :

<img src="https://i.stack.imgur.com/pOYSb.png" alt="enter image description here">

What I'm expecting :

<img src="https://i.stack.imgur.com/7WV7e.png" alt="enter image description here">

Note: I don't want to specify a fixed width.

PrimeFaces p:selectOneMenu width

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我希望p:selectOneMenu宽度是自动的，相对于父单元格，而不是它所拥有的值。<p:panelGrid> <p:row> <p:column><p:outputLabel value="Value01" for="idInput01"/></p:column> <p:colum...

问PrimeFaces p:selectOneMenu宽度
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问PrimeFaces p:selectOneMenu宽度EN