CODEWITHSUNDEEP
jqueryjsfjsf-2primefaces
Zaw Than oo
Zaw Than oo

Reputation: 9935

Primefaces p:panel width issue inside in p:layout

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.

Upvotes: 1

Views: 9388

Answers (1)

Andy
Andy

Reputation: 6568

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?

Upvotes: 1

Related Questions