Question

当我点击<p:selectOneMenu>时，整个布局崩溃了。当我再次单击菜单外部然后再单击菜单本身时，布局总是会更改。当我删除<p:panel>时，问题就消失了。我发现问题是<p:panel>与<h:panelGrid>结合使用。

如何避免这种行为？看下面的我的GIF！

其他信息：

Primefaces 6.0
Primefaces“Omega”主题

这是我的最小代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>Test</title>
</h:head>
<h:body>

<h:form>
    <h:panelGrid columns="1" style="width:100%;">
        <h:panelGroup layout="block">
            <p:panel header="panel">
                <h:panelGrid columns="1" cellpadding="5">

                    <h:panelGrid id="wfSelectionGrid" columns="2" >
                        <h:outputText value="Category:" />
                        <p:selectOneButton >

                            <f:selectItem itemLabel="1" itemValue="1" />
                            <f:selectItem itemLabel="2" itemValue="2" />
                            <f:selectItem itemLabel="3" itemValue="3" />
                        </p:selectOneButton>
                    </h:panelGrid>

                    <h:panelGrid columns="4">
                        <p:outputLabel for="wfSelectionMenu" value="Anwendungsfall:" />
                        <p:selectOneMenu id="wfSelectionMenu">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItem itemLabel="AA" itemValue="AA" />
                            <f:selectItem itemLabel="BB" itemValue="BB" />
                            <f:selectItem itemLabel="CC" itemValue="CC" />
                        </p:selectOneMenu>

                        <p:commandButton id="defineXmlButton" value="to stuff" />

                    </h:panelGrid>

                </h:panelGrid>
            </p:panel>
        </h:panelGroup>
    </h:panelGrid>
</h:form>

</h:body>
</html>

编辑1： 细分为更少的代码，即使以下示例也会导致问题：

        <h:form>
                    <p:panel header="panel">

                            <h:panelGrid columns="2">
                                <p:outputLabel for="wfSelectionMenu" value="Anwendungsfall:" />
                                <p:selectOneMenu id="wfSelectionMenu">
                                    <f:selectItem itemLabel="Select One" itemValue="" />
                                    <f:selectItem itemLabel="AA" itemValue="AA" />
                                    <f:selectItem itemLabel="BB" itemValue="BB" />
                                    <f:selectItem itemLabel="CC" itemValue="CC" />
                                </p:selectOneMenu>
                            </h:panelGrid>
                    </p:panel>
        </h:form>

编辑2： 添加颜色使得在点击事件期间哪些组件发生更改变得更加明显。现在，通过使用属性cellspacing并将其设置为零，问题就消失了。但是还有另一种（更好的）解决方案吗？

           <p:panel header="panel" style="background-color:blue;">
                <h:panelGrid columns="2" style="background-color:red;"  cellspacing="0" cellpadding="10">
                    <p:outputLabel for="wfSelectionMenu" value="Anwendungsfall:" style="background-color:green;" />
                    <p:selectOneMenu id="wfSelectionMenu" >
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="AA" itemValue="AA" />
                        <f:selectItem itemLabel="BB" itemValue="BB" />
                        <f:selectItem itemLabel="CC" itemValue="CC" />
                    </p:selectOneMenu>
                </h:panelGrid>
            </p:panel>

编辑3： 使用devtools - 有趣的html组件大小是：

<td>每边填充117*28 + 10 .. 点击每边115*28 + 10填充后。为什么组件丢失2 px？似乎每个其他组件都保持相同的大小。

单击SelectOneMenu时为什么Panel会使我的视图崩溃？

0 个答案: