Primefaces号码：内部P中面板宽度问题：布局

Primefaces 3.5Primefaces号码：内部P中面板宽度问题：布局

当我在p:panel设置p:dataTable，面板不能显示兼容宽度。问题是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，一切都可以。

来源

2013-08-01 CycDemo

为什么不直接使用''P的style'属性：panel'并设置'width'（例如'风格= “WIDTH：500px的”'）。根据需要更改大小。 – Andy

@安迪，固定宽度？我想100％的宽度，但它将与p：布局内容兼容 – CycDemo

这只是一个建议，100％宽度不起作用？ – Andy

如果仔细观察，宽度已经达到100％。面板的宽度是相对于其封闭的容器。您需要增加宽度大小以获得所需的结果。你可以通过使用p:panel的style属性，像这样

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

您也可以覆盖PrimeFaces CSS类.ui-panel做到这一点。您可能会发现此链接有用

How to override stylesheets of PrimeFaces?

来源

2013-08-01 10:40:22 Andy

哇，没关系。我不需要删除任何标签。谢谢:)我只设置了150％。 – CycDemo

不客气:) – Andy

Primefaces号码：内部P中面板宽度问题：布局

回答

相关问题