Primefaces p：面板宽度问题在p：布局内部

Question

Primefaces 3.5

当我在p:panel设置p:dataTable时，面板无法显示兼容宽度。 问题是table width大于panel width ，如下图所示。

在此处输入图片说明

如果我删除p:layout ，那就可以了。

我想让panel with table width大于table width 。 可以使用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>

更新

即使我通过jquery获取面板宽度，它也始终返回null 。

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

但是，我得到了令人惊讶的观点。 如果我删除h:form ，则无需使用jquery就可以了。

Answer 1

如果仔细看，宽度已经是100％。 面板的宽度是相对于其封闭容器的。 您将需要增加宽度大小以获得所需的结果。 您可以像这样使用p:panel的style属性来完成此操作

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

您还可以重写PrimeFaces CSS类.ui-panel 。 您可能会发现此链接有用

如何覆盖PrimeFaces的样式表？

Primefaces p：面板宽度问题在p：布局内部

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-08-01 10:40:22

Primefaces p：面板宽度问题在p：布局内部

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-08-01 10:40:22

解决方案1
1 已采纳 2013-08-01 10:40:22