PrimeFaces p:selectOneMenu宽度

Question

我想p:selectOneMenu宽度是关于父细胞的自动关于它有的值.

<p:panelGrid>
    <p:row>
        <p:column><p:outputLabel value="Value01" for="idInput01"/></p:column>
        <p:column><p:inputText  value="#{bean.input01}" id="idInput01" /></p:column>
        <p:column><p:outputLabel value="Value02" for="idSelect" /></p:column>
        <p:column>
            <p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter">
                <f:selectItems value="#{bean.objectsList}" var="varObject" itemLabel="#{varObject.label}" itemValue="#{varObject}" />
            </p:selectOneMenu>
        </p:column>
    </p:row>
</p:panelGrid>

我得到了什么:

我期待的是:

注意:我不想指定固定宽度.

Answer 1

我的解决方案:autoWidth ="false"

Answer 2

我覆盖 .ui-selectonemenu, .ui-selectonemenu-label到:

.ui-selectonemenu{
     width: 100% !important;
}
.ui-selectonemenu-label{
     width: 100% !important;
}  

Answer 3

我发现的唯一方法是jQuery在加载时使用初始化宽度.

你可以简单地创建一个像这样的CSS类(只是用作未来选择器):

.full-width
{

}

并将其添加到您的组件:

<p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter" styleClass="full-width">
    <f:selectItems value="#{bean.objectsList}" var="varObject"  itemLabel="{varObject.label}" itemValue="#{varObject}" />
</p:selectOneMenu>

由于您需要jQuery,h:head如果您尚未使用使用它的PrimeFaces组件,则应将其添加到您的内部.

<h:outputScript library="primefaces" name="jquery/jquery.js" />

这是一个初始化选择器中所有p:selectOneMenu的小脚本:

<script>
    $(document).ready(
        function()
        {
            $("div.ui-selectonemenu.full-width").each(
                function()
                {
                    $(this).css("width",$(this).parent().width());
                }
            );
        }
    );
</script>

Answer 4

您可以直接在组件中添加width值来修改它,以避免影响页面中存在的其他p:selectOneMenu.

<p:selectOneMenu  style="width: 100% !important">
...
</p:selectOneMenu>