如何为嵌入的h：panelGroup设置指定的宽度

Question

该页面有一个h：panelGrid，其中包含两个h：panelGroup，预计会显示在同一行中。

另外一项要求是左侧panelGroup应占总宽度的30％，其他70％。

我尝试了几种方法来实现这一目标但失败了......

<h:form id="form">
            <h:panelGrid id="pricePanel" columns="2" style="width:100%;" columnClasses="columnClazz" rowClasses="rowClazz">
                <h:panelGroup>
                    <p:dataTable scrollHeight="250"  id="priceData" var="item" value="#{accumByCustomerViewModel.quoteInfo}" 
                    scrollable="true" rowIndexVar="rowInfo" rowKey="#{item.brand_code}" selection="#{accumByCustomerViewModel.selectedBrand}" selectionMode="single">
                        <p:ajax event="rowSelect" listener="#{accumByCustomerViewModel.onRowSelect}"
                                update=":form:custGrid"/>   
                        <p:columnGroup id="columnGroup" type="header">
                            <p:row>
                                <p:column id="goldHeader" rendered="true" headerText="积存金" colspan="4"/>
                            </p:row>
                             <p:row>
                                <p:column id="brandHeader" rendered="true" headerText="品牌"/>
                                <p:column id="quoteDateHeader" rendered="true" headerText="报价日期"/>
                                <p:column id="salePriceHeader" rendered="true" headerText="卖出价"/>
                                <p:column id="redeemPriceHeader" rendered="true" headerText="赎回价"/>
                            </p:row>
                        </p:columnGroup>
                        <p:column id="brand_code" rendered="true">
                            #{item.brand_name}
                        </p:column>
                        <p:column id="quote_date" rendered="true">
                            #{item.quote_date} 
                        </p:column>
                        <p:column id="salePrice" rendered="true">
                           #{item.entity_sale_price}
                        </p:column>.
                        <p:column id="redeemPrice" rendered="true">
                            #{item.entity_redeem_price}
                        </p:column>
                    </p:dataTable>
                </h:panelGroup>
                <h:panelGroup id="custGrid">
                    <p:fieldset legend="客户信息" id="custFieldset">
                        <h:panelGrid columns="2">
                            <h:outputText value="银行账号:"/>
                            <p:inputText value="#{accumByCustomerViewModel.custInfo.bank_acc}" style="color:red;font-weight:bold;"/>
                            <h:outputText value="证件类型: "/>
                            <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_type}" style="color:red;font-weight:bold;"/>
                            <h:outputText value="证件号码: "/>
                            <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_no}" style="color:red;font-weight:bold;"/>
                        </h:panelGrid>
                    </p:fieldset>
                    <p:fieldset legend="品牌" id="brandFieldset">
                        <h:panelGrid columns="2">
                            <h:outputText value="品牌名称:"/>
                            <h:outputText value="#{accumByCustomerViewModel.selectedBrand.brand_name}" style="color:red;font-weight:bold;"/>
                            <h:outputText value="金额: "/>
                            <p:inputText value="#{accumByCustomerViewModel.selectedBrand.entity_sale_price}" style="color:red;font-weight:bold;"/>
                        </h:panelGrid>
                    </p:fieldset>
                </h:panelGroup>
            </h:panelGrid>
        </h:form>

Answer 1

将<h:panelGroup>中的<h:panelGrid>声明为

<h:panelGroup style="width: 30%;" layout="block">
<h:panelGroup style="width: 70%;" layout="block">

所以它们被渲染为<div> s，没有它，它们被渲染为<span>，因此它们不会保持宽度。它对我有用。

在您的情况下：

我使用了以下代码：

    <style>
        .one{width: 70%; border: 1px solid red;}
        .two{width: 30%; border: 1px solid red;}
    </style>

    <h:panelGrid id="pricePanel" columns="2" style="width:100%;" columnClasses="one, two">      
            <h:panelGroup layout="block">
               <table style="width:100%;">
                <tr>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                </tr>
                <tr>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                </tr>
                <tr>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                </tr>            
               </table>                  
            </h:panelGroup>             
            <h:panelGroup id="custGrid" layout="block">             
                <p:fieldset legend="客户信息" id="custFieldset">
                    <h:panelGrid columns="2">
                        <h:outputText value="银行账号:"/>
                        <p:inputText value="#{accumByCustomerViewModel.custInfo.bank_acc}" style="color:red;font-weight:bold;"/>
                        <h:outputText value="证件类型: "/>
                        <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_type}" style="color:red;font-weight:bold;"/>
                        <h:outputText value="证件号码: "/>
                        <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_no}" style="color:red;font-weight:bold;"/>
                    </h:panelGrid>
                </p:fieldset>
                <p:fieldset legend="品牌" id="brandFieldset">
                    <h:panelGrid columns="2">
                        <h:outputText value="品牌名称:"/>
                        <h:outputText value="#{accumByCustomerViewModel.selectedBrand.brand_name}" style="color:red;font-weight:bold;"/>
                        <h:outputText value="金额: "/>
                        <p:inputText value="#{accumByCustomerViewModel.selectedBrand.entity_sale_price}" style="color:red;font-weight:bold;"/>
                    </h:panelGrid>
                </p:fieldset>                    
            </h:panelGroup>
        </h:panelGrid>

获得类似的输出：

仔细查看这部分代码：columnClasses="one, two"

Answer 2

仅使用具有以下属性的panelGroups，所需工作。

<h:panelGroup style="width: 100%; float: left;">
    <h:panelGroup style="display: inline-table; width: 30%; float: left;">Leftside Content</h:panelGroup>
    <h:panelGroup style="display: inline-table; width: 70%; float: left;">Rightside Content</h:panelGroup>
</h:panelGroup>