两种不同的<rich：Panel>在保持单个panelGrid时会改变位置

Question

我有两个rich:panel(id="pn2"和id =";pn3"在给定的代码)在一个单一的h:panelGrid。我把两个面板一个接一个地放在一行中。

我有以下两个问题:

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

2. 为什么我必须给出columns="4"在h:PanelGrid内实现所需的位置(两个面板在单行和一个接一个)?我在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

对于问题1,h:panelGrid只是一个布局，但没有关于高度。对于高度，你需要使用css来控制它。

对于问题2，尝试删除那些

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