How can I get p: selectOneMenu to correctly calculate its width inside dialogs?

Question

When I paste a p:selectOneMenu into p:dialog , its initial width is too small in Primefaces 3.4. The width of these widgets was excellent in Primefaces 3.2. Do I need to do hacks to get around this?

The problem appears in Chrome. The following code example demonstrates the problem:

 <p:selectOneMenu value="A" onchange="testDialog.show()"> <f:selectItem itemLabel="Default item" itemValue="A" /> <f:selectItem itemLabel="Click here to show the dialog" itemValue="B" /> </p:selectOneMenu> <p:dialog header="Test dialog" widgetVar="testDialog"> <p:selectOneMenu value="A"> <f:selectItem itemLabel="This one here in the dialog" itemValue="A" /> <f:selectItem itemLabel="doesn't calculate" itemValue="B" /> <f:selectItem itemLabel="its width" itemValue="C" /> <f:selectItem itemLabel="correctly" itemValue="D" /> </p:selectOneMenu> </p:dialog> 

Answer 1

I was able to reproduce your problem; he, like a drop-down button, is blissfully unaware that he is closing the text box. In my setup, I was able to correctly select selectOneMenus with this CSS fix:

 <style type="text/css"> .ui-selectonemenu label.ui-selectonemenu-label { padding-right: 28px; text-align: left; } </style> 

Edit: Oh, it looks like this solution is very similar to akoskm comment. But I tried this at the time, and text-align: right didn't work for me; only text-align: left left the characters uncovered.

Answer 2

Wrap p:selectOneMenu in a dialog with div

 <p:dialog header="Test dialog" widgetVar="testDialog"> <div style="width: 100%"> <p:selectOneMenu value="A"> ... </p:selectOneMenu> </div> </p:dialog> 

You might also be able to build selectOneMenu with some primefaces component, but I think you shouldn't use components to fix styles.