p:selectOneMenu with relative width stretches out when resizing browser

Question

When I increase browser's window size (eg changing resolutions from 1024x768 to 1920x1080), the <p:selectOneMenu> becomes from this:

to this:

I figured out that the problem arises when I add a relative width to the component, eg:

<p:selectOneMenu ... style="width: 30%;">

How can I remove the unnecessary space? I am using PrimeFaces 3.3.1

Answer 1

If you do not want the selectonemenu to stretch while resizing or by its text use

.ui-selectonemenu {
    min-width: 0 !important;
}

Perfectly worked for me.