How can i set specified width for embedded h:panelGroup

Question

The page has a h:panelGrid which contains two h:panelGroup expected to be displayed in the same line.

And additional requirement is that the left panelGroup should be 30% of the total width,the other 70%.

I have tried a couple of ways to make this happen but failed...

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

Do you need something like this? http://jsfiddle.net/LbhTD/ – Parkash Kumar Nov 13 '13 at 08:40 — Parkash Kumar, Nov 13 '13 at 08:40

Kuba · Accepted Answer · 2013-11-14T08:30:11.000

Declare your <h:panelGroup> in <h:panelGrid>as

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

so they get rendered as <div>s, without it they are rendered as <span> and as such they do not keep their width. It worked for me.

In your case:

I used the following code:

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

to get an output like that:

enter image description here

take a closer look at this part of code: columnClasses="one, two"

+1 for layout="block", which causes the output to be rendered as a Div. — 8bitjunkie, Nov 13 '13 at 11:36
Unless you specify `id` , it simply doesn't get rendered as div.So,it should be `` then it gets rendered as div — SRy, Nov 14 '13 at 02:45
it doesn't work for me...Kuba...i don't have enough reputation to post a image...Do you have any communication account like skype,MSN? — Chuck, Nov 14 '13 at 02:48
@SRy Can i have your skype or MSN account to discuss this issue...i cannot post image and the problem persists... — Chuck, Nov 14 '13 at 03:15
@SRy - yes it does even without Id - [link](http://stackoverflow.com/questions/8816212/how-to-conditionally-render-plain-html-elements-like-divs). — Kuba, Nov 14 '13 at 06:48
ok, since You did not post your email on your account, I can't send you my contact data. Make sure you remove all the styling from your code and leave only what is essential (30/70%). Make sure your `` is not empty. And finally study your generated output with Firebug or some other WebTools. — Kuba, Nov 14 '13 at 08:13
@Kuba wow...Kupa...it works this time...the key point here is that plural classes can be set up in columnClasses and then each column in the table will take one...could you send your contact data to geshenyi_geshenyi@aliyun.com? — Chuck, Nov 15 '13 at 08:03

score 1 · Answer 2 · answered Nov 13 '13 at 09:07

1

Use only panelGroups with following properties, working desired.

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

answered Nov 13 '13 at 09:07

Parkash Kumar

4,710
3
23
39

1

didn't I just write that? – Kuba Nov 13 '13 at 09:12

How can i set specified width for embedded h:panelGroup

2 Answers2