CSS PrimeFaces p:selectOneMenu 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16784460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PrimeFaces p:selectOneMenu width
提问by ehab refaat
I want p:selectOneMenuwidth to be auto regarding to the parent cell not regarding to the values it has.
我希望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>
What I've got :
我有什么：
What I'm expecting :
我期待的是：
Note: I don't want to specify a fixed width.
注意：我不想指定固定宽度。
回答by Marcos Abrah?o
My solution: autoWidth="false"
我的解决方案：autoWidth="false"
回答by ehab refaat
i overrode.ui-selectonemenu, .ui-selectonemenu-labelto:
我超越.ui-selectonemenu, .ui-selectonemenu-label了：
.ui-selectonemenu{
width: 100% !important;
}
.ui-selectonemenu-label{
width: 100% !important;
}
回答by Alexandre Lavoie
The only way I found is to use jQueryto initialize width at load time.
我发现的唯一方法是jQuery在加载时使用初始化宽度。
You can create simply a CSS class like this (just to be used as a futur selector) :
您可以像这样简单地创建一个 CSS 类（仅用作未来选择器）：
.full-width
{
}
And add it to your component :
并将其添加到您的组件中：
<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>
Since you will need jQuery, you should add this inside your h:headif you are not already using PrimeFacescomponents that use it.
由于您将需要jQuery，h:head如果您尚未使用使用它的PrimeFaces组件，则应将其添加到您的内部。
<h:outputScript library="primefaces" name="jquery/jquery.js" />
Here is the small script that initialize all p:selectOneMenu in the selector :
这是初始化选择器中所有 p:selectOneMenu 的小脚本：
<script>
$(document).ready(
function()
{
$("div.ui-selectonemenu.full-width").each(
function()
{
$(this).css("width",$(this).parent().width());
}
);
}
);
</script>
回答by Nimpo
you can add the value of width directly in the component to modify it, to avoid impacting other p: selectOneMenu existing in the page.
可以直接在组件中添加width的值进行修改，避免影响页面中存在的其他p:selectOneMenu。
<p:selectOneMenu style="width: 100% !important">
...
</p:selectOneMenu>
回答by 99Sono
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.
Primefaces 6.0 现在有一个名为 autoWidth 的新字段，默认设置为 true，您可以设置为 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.
如果您按照上述某些回复进行操作并将其设置为 false，那么您所做的就是与您的应用 css 玩轮盘赌。通过将其设置为 false，primefaces 将让您来管理宽度。您可以通过样式属性或应用程序中的某些 css 类在 selectOneMeny 上显式设置宽度。
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.
所以我们真正想要的是让 autoWidth 正常工作。
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.
最后，我查看了组件和渲染器，很明显自动宽度机制在后端不起作用。后端只构建一些类似于 JSON 的数据，primefaces javascript 构建器可以使用这些数据在浏览器上正确调整小部件的行为。
If you loook at primefaces 6.0 source code, the bug is in META-INF\resources\primefaces\forms
如果您查看 primefaces 6.0 源代码，则该错误位于 META-INF\resources\primefaces\forms
Search for the code that says the following:
搜索显示以下内容的代码：
PrimeFaces SelectOneMenu Widget
PrimeFaces SelectOneMenu 小部件
In this javascript function hunt for the code chunk that says:
在这个 javascript 函数中寻找如下代码块：
_render: function() {
if(this.cfg.autoWidth) {
In this section of code your bug is the following line:
在这部分代码中，您的错误是以下行：
this.jq.css('min-width', this.input.outerWidth());
Here, I applied the following patch that hopefully should work in geting the drop down box to be as fat as the largest label:
在这里，我应用了以下补丁，希望它可以使下拉框与最大标签一样胖：
_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
}
}
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
上面代码的想法是：(a) 查看带有所有标签的隐藏 div 并获得该 div 的宽度 (b) 将该长度加上面朝下的素面三角形所需的宽度 (c) 比较我们的宽度计算到 primefaces 建议的那个并且似乎太小了
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.
注意：要安装补丁，您必须复制 SelectOneWidget 的所有 Primaces 代码。将其添加到您控制的 javascript 文件中。确保只在加载了 primefaces javascript 文件后才运行 javascript 文件的编译。
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.
通常素面是在 HEAD 处渲染的。因此，如果您将 jasvacript 作为身体的最后一个元素，您应该没问题。
The patching is working fine for me. THis is code I do not like to maintain however.
修补程序对我来说很好。然而，这是我不喜欢维护的代码。
回答by infiniteStacks
You can ID the element and change the style width through CSS. Make it 100% of its container.
您可以通过 CSS 标识元素并更改样式宽度。使其成为 100% 的容器。
回答by peater
If your p:selectOneMenuis in a DIV with an assigned width, I find setting style="width:100%;"on the p:selectOneMenuseems to work in my case.
如果你p:selectOneMenu是一个DIV与分配的宽度，我觉得设置style="width:100%;"上p:selectOneMenu，似乎我的情况下工作。
回答by DoraCet
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:
问题可能是在呈现的 HTML 中设置的 min-width。如果是这种情况，请使用固定宽度的 CSS 选择器，如下所示：
<p:selectOneMenu styleClass="fixed-width" ...
then define CSS
然后定义 CSS
.fixed-width { min-width: 100% !important; }
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'.
这会将 selectOneMenu 小部件的宽度设置为父元素的宽度。为了让它工作，父元素的宽度不应该是“自动”。
回答by Prakash Bist
Those who still got problem with selectonemenu may try this
那些仍然对 selectonemenu 有问题的人可以试试这个
.ui-selectonemenu {
min-width: 0 !important;
}
Perfectly worked for me.
非常适合我。
