PF 6.0.RC3 - p:selectOneMenu width problem

[Marqus]

When upgrading from PrimeFaces 5.2 to 6.0.RC3, I've noticed undesired effect with p:selectOneMenu width. PrimeFaces 5.3 gives me the same.
5.2

5.3

6.0.RC3

Code: Select all

<style>
            .aCol1 {
                text-align: right;
                width: 40%;
            }
            .aCol2 {
                text-align: left;
                width: 60%;
            }
        </style>
        <h:form id="form" >  
            <p:panel style="width: 30%;"
                     header="SelectOneMenu width test - PrimeFaces 5.3">
                <h:panelGrid columns="2" width="100%" cellspacing="5"
                             columnClasses="aCol1,aCol2">
                    
                    <p:outputLabel value="Sth1"/>
                    <p:commandButton type="button" value="Test1" style="width: 100%"/>
                    
                    <p:outputLabel value="Sth2"/>
                    <p:commandButton type="button" value="Test2" style="width: 100%"/>
                    
                    <p:outputLabel value="Sth3"/>
                    <p:selectOneMenu value="#{someBean.propertyVal}"
                                     style="width: 100%">
                        <f:selectItem noSelectionOption="true" itemLabel="" itemValue=""/>
                        <f:selectItem itemLabel="val1" itemValue="val1"/>
                        <f:selectItem itemLabel="val2" itemValue="val2"/>
                    </p:selectOneMenu>

                    <p:outputLabel value="Sth4"/>
                    <p:commandButton type="button" value="Test3" style="width: 100%"/>
                </h:panelGrid>
                <p:separator/>
            </p:panel>
        </h:form>

[kukeltje]

Check the issuelist. Has been reported before iirc. Using a "width: calc(100% -20px)" might be a workaround. Where you have to determine the real value instead of my guestimate of 20px yourself

[Marqus]

Sorry, I overlooked that issue.

[nokiajavi]

I have the same problom with primefaces 6.0.

By default, primefaces add the attribute min-width, with a value of the total length of elements into panel (Items).


This causes not well renderize the component and leave the panels . So far I have solved by adding a class with min- whdth : 0px important!

¿Ist a Issue Pirmefaces 6.0?

[mert.sincan]

Hi Marqus,

Please use "ui-fluid" class for width:100%;

Code: Select all

...
<p:panel style="width: 30%;"  header="SelectOneMenu width test - PrimeFaces 5.3 or 6.0">
    <h:panelGrid columns="2" width="100%" cellspacing="5"  columnClasses="aCol1,aCol2" styleClass="ui-fluid">
                    
           <p:outputLabel value="Sth1"/>
           <p:commandButton type="button" value="Test1"/>
                    
           <p:outputLabel value="Sth2"/>
           <p:commandButton type="button" value="Test2" />
                    
           <p:outputLabel value="Sth3"/>
           <p:selectOneMenu value="#{someBean.propertyVal}">
                <f:selectItem noSelectionOption="true" itemLabel="" itemValue=""/>
                <f:selectItem itemLabel="val1" itemValue="val1"/>
                <f:selectItem itemLabel="val2" itemValue="val2"/>
            </p:selectOneMenu>

            <p:outputLabel value="Sth4"/>
            <p:commandButton type="button" value="Test3"/>
    </h:panelGrid>
    <p:separator/>
</p:panel>
...

Hi Nokiajavi,

This causes not well renderize the component and leave the panels . So far I have solved by adding a class with min- whdth : 0px important!

Please try;

Code: Select all

<p:selectOneMenu autoWidth="false" .../>

Github issue; https://github.com/primefaces/primefaces/issues/244

[josechuah]

In case for anyone who wanted a fixed width for <p:selectonemenu> under these scenario. Hope following setting helps.

1. initial width with loaded different length of data.
2. select a data from the select one menu list or re-loaded during run time using ajax from other component(such as p:inputText)

1. Create a css class in the local css file.
.ui-selectonmenu_full_width{
min-width: 178px;
max-width: 178px;
}

2. at the xhtml form
...
<p:selectOneMenu styleClass="ui-selectonmenu_full_width" autoWidth="false" .../>
...