如何在primefaces的layoutUnit中設置高度？

我正在使用primefaces 5.0。下面是我的頁面，我喜歡將layoutupit的高度固定設置爲200px。有沒有可能做到這一點？當前高度將被忽略。如何在primefaces的layoutUnit中設置高度？

<?xml version="1.0" encoding="UTF-8"?> 
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml"> 
    <ui:define name="header_title"> 
    <h:outputText value="Titel" align="center" /> 
    </ui:define> 
    <ui:define name="content"> 
    <h:form id="labelForm" style="height:100%"> 
     <p:growl id="growl" showDetail="true" /> 
     <p:layout style="height:100%" fullPage="false" > 
     <p:layoutUnit position="west" header="west" resizable="false" closable="false" collapsible="false" style="height:200px"> 
      <p:tieredMenu id="type" model="#{dynamicLabelMenu.menu}" trigger="itemSelect" /> 
     </p:layoutUnit> 
     <p:layoutUnit position="center" resizable="false" closable="false" collapsible="false" header="center" style="height:200px"> 
      <!-- datatable --> 
     </p:layoutUnit> 
     <p:layoutUnit position="south" size="100" header="Bottom" resizable="false" closable="false" collapsible="false"> 
      <br/> 
      <br/> 
      <!-- datatable --> 
     </p:layoutUnit> 
     </p:layout> 
    </h:form> 
    </ui:define> 
</ui:composition>

來源

2014-09-10 Sarah

的高度應與其他單位一致...這意味着，如果你想解決一個單位的其他人要也是固定的高度...

這背後的原因是PrimeFaces將CSS規則嵌入到style屬性中，並完全忽略了您的樣式。

你有兩個選擇來解決這個問題：

如果你是沒事保持單元之間的一致的，那麼這可能幫助。目前您的佈局是100％，這意味着該單位應適應內容的高度，但fix它，你可能會採取這種做法
```
<p:layout style="min-height:200px;"> 
```
這種方式，你有200像素的最小高度，它可以與拓展內容，或只是使用height:200px。
另一個選項是定義與!important選項CSS類，雖然使用!important是醜陋的，不推薦，但在這種特殊情況下PrimeFaces被注入的CSS到樣式屬性使其難以級聯高度選項。
```
<style> 
    .westUnit { 
    height: 200px !important; 
    } 
</style> 

<p:layoutUnit position="west" styleClass="westUnit"> 
```

來源

2014-09-10 13:17:13

感謝您的快速響應。我更喜歡第二種選擇。 – Sarah 2014-09-10 14:48:54

看一看CSS的優先權規則： http://www.standardista.com/css3/css-specificity/

你可以簡單地通過增加更具體的CSS選擇器覆蓋primefaces CSS規則。

例子：

Primefaces：

.ui-dialog .ui-dialog-title { 
    text-align : center; 
}

你的CSS：

#content .ui-dialog .ui-dialog-title { 
    text-align : right; 
}

您可以使用瀏覽器的調試工具（F12在大多數瀏覽器）來找出魔女primefaces CSS使用爲您的組件。用你自己的css代碼更具體的CSS選擇器覆蓋它們。

來源

2014-09-11 06:17:24

如何在primefaces的layoutUnit中設置高度？

回答

相關問題