Jquery Primefaces p:布局中的面板内部宽度问题_Jquery_Jsf_Jsf 2_Primefaces

Jquery Primefaces p:布局中的面板内部宽度问题

jquery jsf jsf-2 primefaces

Jquery Primefaces p:布局中的面板内部宽度问题,jquery,jsf,jsf-2,primefaces,Jquery,Jsf,Jsf 2,Primefaces,Primefaces 3.5 当我在p:panel中设置p:dataTable时，panel无法显示兼容的宽度。问题是表格宽度大于面板宽度，如下图所示如果我删除p:layout，就可以了我希望面板的宽度大于表格宽度。它可以通过使用jQuery来解决吗 panel.xhtml <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="h

Primefaces 3.5

当我在

p:panel

中设置

p:dataTable

时，panel无法显示兼容的宽度。问题是

表格宽度

大于

面板宽度

，如下图所示

如果我删除

p:layout

，就可以了

我希望

面板的

宽度大于

表格宽度

。它可以通过使用

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>

但是，我有一个惊人的观点。如果我删除

h:form

，那么不使用jquery就一切正常。

如果仔细观察，宽度已经是100%。面板的宽度相对于其封闭容器。您需要增加宽度大小以获得所需的结果。您可以使用

p:panel

的

style

属性来实现这一点

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

您还可以覆盖PrimeFacesCSS类

.ui面板

。您可能会发现此链接很有用

如果仔细观察，宽度已经达到100%。面板的宽度相对于其封闭容器。您需要增加宽度大小以获得所需的结果。您可以使用

p:panel

的

style

属性来实现这一点

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

您还可以覆盖PrimeFacesCSS类

.ui面板

。您可能会发现此链接很有用

为什么不直接使用

p:panel

的

style

属性并设置

宽度（例如style=“width:500px”
）。根据需要更改大小。@Andy，确定宽度？我想要100%宽度，但它将与p:layout content兼容这只是一个建议，100%宽度不起作用？我喜欢，它不好。为什么不简单地使用p:panel
的style
属性并设置宽度
（例如style=“width:500px”
）。根据需要更改大小。@Andy，确定宽度？我想要100%的宽度，但它将与p:布局内容兼容这只是一个建议，100%的宽度不起作用？我喜欢，它不好。哇，它是好的。我不需要移除任何标签。谢谢：）我刚定了150%。哇，没关系。我不需要移除任何标签。谢谢：）我刚定了150%。