如何在primefaces的layoutUnit中设置高度?

时间:2014-09-10 12:23:54

标签: css layout primefaces height

我正在使用primefaces 5.0。下面是我的页面,我想将高度修复设置为layoutunit西和中心的200px。有没有可能这样做?当前的高度将被忽略。

<?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>

2 个答案:

答案 0 :(得分:1)

高度应该与其他单位一致......这意味着如果你想修复一个单位的高度,其他单位也必须固定......

这背后的原因是PrimeFaces将css规则嵌入到style属性中,完全忽略了你的风格。

您有两种方法可以解决此问题:

  • 如果您可以保持单位之间的一致性,那么这可能有所帮助。目前您的布局高度为100%,这意味着单位应该适合内容,但是fix它可以采用这种方法

    <p:layout style="min-height:200px;">
    

    这样,您的最小高度为200px,可以随内容扩展,或者只使用height:200px

  • 另一个选项是定义一个带有!important选项的CSS类,虽然使用!important是丑陋的而不推荐,但在这种特殊情况下,PrimeFaces将css注入到style属性中难以级联高度选项。

    <style>
       .westUnit {
         height: 200px !important;
       }
    </style>
    
    <p:layoutUnit position="west" styleClass="westUnit">
    

答案 1 :(得分:0)

查看CSS优先级规则: http://www.standardista.com/css3/css-specificity/

您可以通过添加更具体的CSS选择器来覆盖主要的CSS规则。

示例:

Primefaces:

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

你的CSS:

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

您可以使用浏览器调试工具(在大多数浏览器中使用F12)来查找用于组件的女性主要css。使用您自己的css代码中的更具体的CSS选择器覆盖它们。