0

1つのh：panelGridに2つのrich：panel（id="pn2"とid="pn3"）があります。両方のパネルを1列に次々に配置しました。

私は次の2つの問題を抱えています：

  1. これらのパネルは両方とも状況に応じて高さが変化するため、一方のパネルの高さが変化すると、もう一方のパネルが現在の位置から上下に移動します。

  2. 目的の位置を実現するために、h：PanelGrid内にcolumns = "4"を指定する必要があるのはなぜですか（両方のパネルが1行に次々に表示されます）。panelGrid内に2つのパネルしかありません。したがって、これは論理的ではないようです。

    コードは次のとおりです。

                   < 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>

両方のパネルの位置を変更する理由は何ですか？注：ここでは、両方のパネルの高さが動的です。

4

1 に答える 1

0

problem1の場合、h：panelGridは単なるレイアウトですが、高さについては何もありません。高さについては、cssを使用してそれを制御する必要があります。

問題2については、それらを削除してみてください

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

あなたのコードで。

于 2013-03-25T08:20:23.593 に答える