p:selectOneMenu outline gets extra space when nested in p:panel

Question

I'm using PrimeFaces 5.2 and I have a p:selectOneMenu inside a p:panel . If the selectOneMenu is outside of the panel the issue does not persist, but when inside the panel it looks like this:

You can see the distortion on the right side of the selectOneMenu .

I tried some CSS editing but it doesn't seem to help:

.ui-selectonemenu-panel{
    width: 150px;
}
.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper{
    overflow-x: hidden;
}

Setting width to 150px in .ui-selectonemenu-panel only helped restore the dropdown menu's size, not the distorted part itself.

Changing selectOneMenu width from the xhtml file doesn't fix the issue. The theme I used is a PrimeFaces theme called "bootstrap" but resizing the theme doesn't work as well. I didn't try different themes because I'd like to keep using this theme.

This is the way the selectOneMenu should look:

I couldn't find anything on the web similar to this issue. Any help is appreciated.

Answer 1

I figured it out thanks to Geinmachi's comment. Changing ui-selectonemenu-label seems to work.

Originally my selectOneMenu has a 150px width and I edited ui-selectonemenu-label like this in my CSS file at first:

.ui-selectonemenu-label{
    width: 80px !important;
}

And every my selectOneMenu s started to look like this:

You can see the gray area on the right side caused by the shrinked label. And when I make the width 200px it looks like this:

But when I set the label width to 150px I observe the same extra space as pictured in my question. So I tried to set it to 120px and it looks fixed. I think the gray dropdown button on the right side has around 30px width thus setting the label width without respecting that 30px difference causes extra space by overflowing beyond the selectOneMenu .

However, I still don't know why the extra space only occurred when selectOneMenu was nested in a panel.