Primefaces p:panel width issue inside in p:layout

Question

Primefaces 3.5

When I set p:dataTable in p:panel, panel cannot display compatible width. Problem is table width is larger than panel width as below capture image.

enter image description here

If I remove p:layout, it is ok.

I would like to get panel with lager than table width. Can it solve by using jQuery?

panel.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
    <h:head>
    </h:head>   
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="west" size="260">
                left
            </p:layoutUnit>
            <p:layoutUnit position="north" size="50">
                header
            </p:layoutUnit>
            <p:layoutUnit position="center" resizable="true">
                <h:form enctype="multipart/form-data">
                            <p:panel header="Vehicle Information" id="vehicleInfoWizardPanel">  
                                <p:dataTable id="vehicleTable">
                                    <p:column headerText="Sr. No">
                                    </p:column>
                                    <p:column headerText="Registration No">
                                    </p:column>
                                    <p:column headerText="Model">
                                    </p:column>
                                    <p:column headerText="Engine No">
                                    </p:column>
                                    <p:column headerText="Chassis No">
                                    </p:column>
                                    <p:column headerText="Cubic Capacity">
                                    </p:column>
                                    <p:column headerText="Seating">
                                    </p:column>
                                    <p:column headerText="Weight (Ton)">
                                    </p:column>
                                    <p:column headerText="Sum Insured">
                                    </p:column>
                                    <p:column headerText="Product Type">
                                    </p:column>
                                    <p:column headerText="Add On">
                                    </p:column>
                                    <p:column headerText="Period (Month)">
                                    </p:column>
                                    <p:column headerText="Manufacture">
                                    </p:column>
                                    <p:column headerText="Type Of Body">
                                    </p:column>
                                </p:dataTable>
                            </p:panel>
                </h:form>
             </p:layoutUnit>
            <p:layoutUnit position="east" size="260">
                Right
            </p:layoutUnit>
            <p:layoutUnit position="south" size="40">
                footer
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

update

Even if I take panel width by jquery, it is always return null.

var width = $("#vehicleInfoWizardPanel").width();
alert(width);

But, I get amazing point. If I remove h:form, everything is ok without using jquery.

Why not simply use the `style` attribute of `p:panel` and set the `width` (e.g. `style = "width: 500px"`). Change the size as needed. — Andy, Aug 01 '13 at 07:36
@Andy, fix width? I want 100% width, but It will be compatible with p:layout content — Zaw Than oo, Aug 01 '13 at 08:34

score 1 · Accepted Answer · edited May 23 '17 at 11:56

1

If you look closely, the width is already at 100%. The panel's width is relative to its enclosing container. You would need to increase the width size to get the desired result. You could do this by using the style attribute of p:panel like so

<p:panel style="width: 200%" header="Vehicle Information"  id="vehicleInfoWizardPanel">

You could also override PrimeFaces CSS class .ui-panel. You might find this link useful

How to override stylesheets of PrimeFaces?

edited May 23 '17 at 11:56

Community

1
1

answered Aug 01 '13 at 10:40

Andy

5,900
2
20
29

wow, it is ok. I don't need to remove any tag. Thanks :) I just set 150%. – Zaw Than oo Aug 01 '13 at 10:52

Primefaces p:panel width issue inside in p:layout

1 Answers1