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中面板寬度問題：佈局

回答

相關問題