I am looking to align the "components" of a PrimeFaces SelectOneMenu to the right in order to match the overall appearance of a form.
While I have successfully aligned the selectItems, the selected option seems to have some offset issue. Is there a way to address this without manually setting the position in pixels?
https://i.sstatic.net/yD7di.jpg
The following snippet shows a code example within a form and the CSS styles I applied to achieve right alignment of the values. Although the CSS does align the values correctly, as shown in the image, the selected value still has excess margin on the right side.
<p:column style="vertical-align:top;padding-top:8px">
<p:panelGrid id="tdkDetailsPanel" styleClass="hardwareDetailsPanel" columns="2">
<h:outputLabel value="Item: " />
<p:selectOneMenu value="#{backingBean.selectedItemId}">
<f:selectItems value="#{backingBean.availableItemIds}" />
<p:ajax update="itemDetailsPanel" />
</p:selectOneMenu>
<!-- more of the same -->
</p:panelGrid>
</p:column>
.ui-selectonemenu {
width: 100% !important;
text-align: right !important;
}
.ui-selectonemenu-panel {
text-align: right !important;
}
.ui-selectonemenu-list-item {
text-align: right !important;
}
.ui-selectonemenu-label {
text-align: right !important;
}