SelectOneMenu Width Too Small

[undermensch]

The width does not seem to be calculated correctly with the p:selectOneMenu. The down-chevron icon covers the last letter of the item.

[mert.sincan]

Unfortunately, I couldn't replicate it. Do you attach a sample code block for us to replicate? Which options are you using in SelectOneMenu?

Best Regards,

[undermensch]

Here's an example:

Code: Select all

<h:panelGrid columns="2">
                                <p:outputLabel for="theme" value="Theme:"/>
                                <p:selectOneMenu id="theme" required="true" requiredMessage="Select a theme!"
                                                 value="#{editTeacherBean.user.theme}">
                                    <f:selectItems value="#{editTeacherBean.themes}"/>
                                </p:selectOneMenu>
</h:panelGrid>

The down chevron covers the last letters of the longer items. If the padding: 0 is removed from the rain-cyan-light theme.css, the problem seems to be resolved.

Code: Select all

body .ui-selectonemenu {
  vertical-align: baseline;
  border: 1px solid #D9DEE6;
  position: relative;
  transform: none;
  padding: 0;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  border-radius: 4px;
  background: #ffffff;
}

Thanks.

[mert.sincan]

Hi,

Thanks a lot for the sample code block. Fixed for the next version. For now, please try;

Code: Select all

body .ui-selectonemenu .ui-selectonemenu-label {
    padding-right: 2.357rem;
}

body .ui-fluid .ui-selectonemenu-label {
    padding: 0.5rem 0.5rem;
}

Best Regards,

[undermensch]

Great. Thanks!

[mert.sincan]

You're welcome!

Best Regards,