SelectOneMenu: computed inline style of width is 2px too much

Describe the bug

The p:selectOneMenu computes inline styles for the class .ui-input-overlay:

<div class="ui-selectonemenu-panel ui-widget ui-widget-content ui-corner-all ui-helper-hidden ui-shadow ui-input-overlay ui-connected-overlay-exit-done" style="display: none; width: 815px; left: 447px; top: 123.1px; transform-origin: center top 0px;">..</div>

The width (in this case: 815px) is always 2 px too much. Please correct the calculation by substracting exactly 2px while calculating the inline style.

Reproducer

1. Use any p:selectOneMenu
2. Add the following css class to make the difference of 2px more visible:

body .ui-selectonemenu-panel {
  box-shadow: none;
  border-radius: 0;
  border: 1px solid blue;
}

1. Then you see somehing like this:

1. Look at the inline styles of ui-selectonemenu-panel computed by PF and edit its width by substracting 2px. Then the width will be correctly aligned to its upper input-field and looks like this:

Expected behavior

Correct inline width calculation of p:selectOneMenu. As the user cannot correct this issue by css (because its a calculated inline style of PF), it would be good if PF calculates its inline width correctly by substracting 2px within its calculation.

PrimeFaces edition

Community

PrimeFaces version

12

Theme

No response

JSF implementation

Mojarra

JSF version

2.3

Java version

17

Browser(s)

Firefox 107

[melloware]

Here is a MonkeyPatch just add this to your code and you should be able to tweak it however your want. That is the power of PrimeFaces!

if (PrimeFaces.widget.SelectOneMenu) {
    PrimeFaces.widget.SelectOneMenu.prototype.alignPanelWidth = function() {
        //align panel and container
        if (!this.panelWidthAdjusted) {
            var jqWidth = this.jq.outerWidth();
            if (this.panel.outerWidth() < jqWidth) {
                this.panel.width(jqWidth);
            } else {
                this.panel.width(this.panel.width());
            }

            this.panelWidthAdjusted = true;
        }
    };
}

[melloware]

Yes, it’s a hack because the problem why 2px must be substracted is currently unknown…

That is the mystery! Something the way jQuery computes the width.