Question

Primefaces 3.5

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

enter image description here

如果我删除p:layout，则表示没问题。

我希望panel with比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％。面板的宽度相对于其封闭容器。您需要增加宽度大小才能获得所需的结果。您可以使用style的{{1}}属性来完成此操作

p:panel

您还可以覆盖PrimeFaces CSS类<p:panel style="width: 200%" header="Vehicle Information" id="vehicleInfoWizardPanel">。您可能会发现此链接很有用

How to override stylesheets of PrimeFaces?

Primefaces p：面板宽度问题在p：layout中

1 个答案: