PrimeFaces p: selectOneMenu width

Question

I want the width of p:selectOneMenu be automatic relative to the parent cell, not related to its values.

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

What I expect:

Note. I do not want to specify a fixed width.

Answer 1

I am overrode .ui-selectonemenu, .ui-selectonemenu-label :

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

Answer 2

My solution: autoWidth = "false"

Answer 3

The only way I found is to use jQuery to initialize the width at boot time.

You can create just a CSS class like this (only for use as a futur selector ):

 .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 to your h:head if you are not already using the PrimeFaces components that use it.

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

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

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

Answer 4

you can add the width value directly to the component to change it, so as not to affect the other p: selectOneMenu existing on the page.

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

Answer 5

Now I have the correct fix.

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

IF you do, as some of the answers above say, and set it to false, all you do is play roulette using the css application. By setting it to false, perforations will leave this for you to control the width. You can either set the width specified in selectOneMeny according to the clear style attributes, or some css class in your application.

But this is not what this problem is about, this problem is related to the fact that the default behavior, not indicating any width in the drop-down list, leads to the fact that our drop downs are usually too small for shortcuts there.

So we really want autoWidth to work proplerly.

FInally, I looked at the component and the rendering, and it is obvious that the automatic width mechanism does not work on the server side. The backend side only builds some JSON-like data that the javascript landmark constructor can use to properly configure the browser for widget behavior.

If you are reading the 6.0 source code, the error is listed in META-INF \ resources \ primefaces \ forms

Find the code that says the following:

PrimeFaces SelectOneMenu Widget

In this javascript search function for a piece of code that says:

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

In this section of code, your error is the following line:

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

Here I applied the following patch, which we hope should work in order to get a drop-down list so that it is as bold 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: (a) look at the hidden div with all the labels and get the width of this div (b) add to this length the width needed for the triangle of downward triangles (c) compare the resulting width with the one suggested using feathers, and which seems too small.

Note: To install the patch, you must copy all the "Increments" code for SelectOneWidget. Add it to your javascript file under your control. Make sure that you only compile your javascript file after loading the javascript file.

Usually perforated are processed in HEAD. Therefore, if you have jasvacript as the last ement in the body, you should be fine.

The patch works fine for me. This is code that I don't like to maintain.

Answer 6

You can identify the element and change the width of the style using CSS. Make it 100% of your container.

Answer 7

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

Answer 8

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

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

then define CSS

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

Specifies the width of the selectOneMenu widget by the width of the parent element. For it to work, the width of the parent elements must not be "auto".