css - 如何在 primefaces 的 layoutUnit 中设置高度？

Question

我使用的是 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>

Answer 1

高度应与其他单位保持一致...意味着如果您想固定一个单位的高度，其他单位也必须固定...

这背后的原因是 PrimeFaces 将 css 规则嵌入到样式属性中，完全忽略了您的样式。

你有两种选择来解决这个问题:

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

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

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

• 另一种选择是使用 !important 选项定义 CSS 类，尽管使用 !important 很丑陋且不推荐使用，但在这种特殊情况下使用 PrimeFaces正在将 css 注入(inject) style 属性，这使得很难级联高度选项。

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