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

Question

我想返回带有前导空格的dropDown框，因此它看起来像某种层次结构。但是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>