0

I have two rich:panel(id="pn2" and id="pn3" in given code) in a single h:panelGrid . I have positioned both panels one after another in a Single row .

I have following two problems :

  1. As both of these panel are changing height depending on the situation, so when one panel changes height, second panel is moving up or down from its current position .

  2. Why I have to give columns="4" inside the h:PanelGrid for achieving the desired position(Both panels in a single row and one after another)? I have only two panels inside the panelGrid . So, this does not seem to be logical .

    Following is the code:

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

Can anybody tell that what is the reason behind changing position of both panels ? Note : here Height of both the panels are dynamic.

4

1 回答 1

0

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

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

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

在你的代码中。

于 2013-03-25T08:20:23.593 回答