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

Question

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

The problem manifests in Chrome. The following example code 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>

Solution 1

I was able to reproduce your problem; it's like the dropdown button is blissfully ignorant of the fact it's covering up the textbox. On my setup I was able to get the selectOneMenus to appear properly with this CSS fix:

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

Edit: Oh whoops, I see this solution is very similar to akoskm's comment. But I tried that at the time and text-align: right wasn't working for me; only text-align: left was leaving the characters uncovered.

Solution 2

Wrap your p:selectOneMenu in the dialog with a div

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

You can probably wrap the selectOneMenu with some primefaces component too, but I think you shouldn't use components to fix styling glitches.

Comments

[Michael Calvin]

I tried this, but the selectOneMenu doesn't expand to fill the div. I also tried styling the selectOneMenu itself with 100% width, but the text is right-aligned and the button covers up the rightmost few characters.

[Akos K]

I missunderstod your problem an focused on the p:dialog. I don't what kind of styling you've used but putting some padding <p:selectOneMenu value="A" style="text-align: right; padding-right: 15px"> made the text to appear inside the selectOneMenu, no covered chars. Of course, the size of the padding may depend on your font size.