JSF SelectOneMenu显示带有前导空格的项

Question

我想返回带前导空格的下拉框，所以它看起来像某种层次结构。但p:slectOneMenu缩小了领先空间。有什么想法如何使小部件离开空间?欢呼。

下面是示例代码:

@ManagedBean
public class AppBean {
    private String city;
    private List<String> cities = new ArrayList<String>();
    @PostConstruct
    public void init() {
        cities = new ArrayList<String>(
                Arrays.asList(
                        "USA",
                        "   New York",
                        "UK",
                        "   London",
                        "   Glasgow",
                        "Spain",
                        "   Barcelona"
                        ));
    }

jsf代码:

<h:form>
    <p:selectOneMenu value="#{appBean.city}">
        <f:selectItems value="#{appBean.cities}" />
    </p:selectOneMenu>
</h:form>

Answer 1

通过在初始代码中添加css来解决问题:

.ui-selectonemenu-panel .ui-selectonemenu-list-item {
    white-space: pre;
}

Answer 2

将空格替换为nbsp;

<h:form>
    <p:selectOneMenu value="#{appBean.city}">
        <f:selectItems value="#{appBean.cities}" var="city" itemLabel="#{city.replace(' ', '&nbsp;')}" itemValue="#{city}" />
    </p:selectOneMenu>
</h:form>