Question

我在一个h：panelGrid中有两个rich：panel（给定代码中的id =“pn2”和id =“pn3”）。我已将两个面板一个接一个地放在单行中。

我有以下两个问题：

由于这两个面板都根据情况改变高度，因此当一个面板改变高度时，第二个面板从其当前位置向上或向下移动。

为什么我必须在h：PanelGrid中给出columns =“4”以获得所需的位置（两个面板在一行中，一个接一个）？我在panelGrid中只有两个面板。所以，这似乎不符合逻辑。

以下是代码：

               < h:panelGrid columns="4">

                    <!--This is for setting up the Accounts for customers-->                    
                    <rich:panel id="pn2" rendered="#{not empty adminBean.currentItem}" header="Add Account" style="margin-top: 10px; width: 545px; margin-left: -7px">

                        <h:panelGrid columns="2">
                            <a4j:commandButton value="Add New" action="#{adminBean.addAccountAction}" render="pn2" />
                            <a4j:commandButton value="Delete" style="margin-left: 10px; width: 70px"></a4j:commandButton>
                        </h:panelGrid>

                        <rich:dataScroller for="setacct" style="margin-top: 17px"></rich:dataScroller>
                        <rich:dataTable id="setacct" value="#{adminBean.accountList}" binding="#{adminBean.addAccountTable}" var="acct" rows="10" style="width: 430px; max-height: 10px;">

                            <rich:column id="c1">
                                <f:facet name="header">
                                    <h:outputText value="Account Type" style="font-size: smaller; font-weight: bolder; "/>
                                </f:facet>
                                <h:inputText value="acct.acctType"></h:inputText>
                            </rich:column>

                            <rich:column id="c2">
                                <f:facet name="header">
                                    <h:outputText value="Branch" style="font-size: smaller; font-weight: bolder;"/>
                                </f:facet>
                                <h:inputText value="acct.branch"></h:inputText>
                            </rich:column>

                            <rich:column id="c3">
                                <f:facet name="header">
                                    <h:outputText value="Account Start Date" style="font-size: smaller; font-weight: bolder;"/>
                                </f:facet>
                                <rich:calendar id="calendar" value="acct.acctStartDate"/>
                            </rich:column>

                            <rich:column id="c4">
                                <f:facet name="header">
                                    <h:outputText value="" style="font-size: smaller; font-weight: bolder;"/>
                                </f:facet>
                                <a4j:commandLink value="select"  render="pn3"/>
                            </rich:column>

                        </rich:dataTable>

                    </rich:panel>

                    <!--This is for issuing credit cards for customers-->
                    <rich:panel id="pn3" rendered="#{not empty adminBean.currentItem}" header="Add Cards" style="margin-top: 10px; width: 620px; margin-left: 30px">

                        <h:panelGrid columns="2">
                            <a4j:commandButton value="Add New" action="#{adminBean.addCardAction}" render="pn3" style="width: 70px"></a4j:commandButton>
                            <a4j:commandButton value="Delete" style="margin-left: 10px; width: 70px"></a4j:commandButton>
                        </h:panelGrid>

                        <rich:dataScroller for="setcard" style="margin-top: 17px"></rich:dataScroller>
                        <rich:dataTable id="setcard" value="#{adminBean.cardsList}" binding="#{adminBean.addCardTable}" var="car" rows="10" style="width: 430px; max-height: 10px;">

                            <rich:column id="cl1">
                                <f:facet name="header">
                                    <h:outputText value="Card Type" style="font-size: smaller; font-weight: bolder; "/>
                                </f:facet>
                                <h:inputText value="#{car.type}"></h:inputText>
                            </rich:column>

                            <rich:column id="cl2">
                                <f:facet name="header">
                                    <h:outputText value="VALID FROM" style="font-size: smaller; font-weight: bolder;"/>
                                </f:facet>
                                <rich:calendar value="#{car.validFrom}" id="cal2"/>
                            </rich:column>

                            <rich:column id="cl3">
                                <f:facet name="header">
                                    <h:outputText value="EXPIRY ON" style="font-size: smaller; font-weight: bolder;"/>
                                </f:facet>
                                <rich:calendar value="#{car.expiryOn}" id="cal3"/>
                            </rich:column>

                            <rich:column id="cl4">
                                <f:facet name="header">
                                    <h:outputText value="AUTO ALERT" style="font-size: smaller; font-weight: bolder;"/>
                                </f:facet>
                                <h:inputText value="#{car.autoMsg}"></h:inputText>
                            </rich:column>

                        </rich:dataTable>

                    </rich:panel>
                </h:panelGrid>

有人能说出改变两个面板位置的原因是什么？注意：这两个面板的高度都是动态的。

Answer 1

对于problem1，h：panelGrid只是一个布局，但没有关于高度。对于高度，您需要使用css来控制它。

对于problem2，请尝试删除

<!--This is for setting up the Accounts for customers-->

代码。

保存在单个panelGrid </rich：panel>中时，两个不同的<rich：panel>更改位置

1 个答案: