如何在primefaces的layoutUnit中设置高度? [英] How can I set the height in layoutUnit of primefaces?

问题描述

我正在使用primefaces 5.0.下面是我的页面，我想将高度固定设置为layoutunit west和center的200px.有可能这样做吗?当前高度将被忽略.

I'm using primefaces 5.0. Below is my page where I like to set the height fix to 200px of the layoutunit west and center. Is there any possibility to do this? The current height will be ignored.

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

推荐答案

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

The height should be consistent with the other units... meaning if you would like to fix the height of one unit the others have to be also fixed...

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

The reason behind this is that PrimeFaces embeds the css rules into the style attribute and totally ignores your style.

您可以通过以下两种方法解决此问题:

You have two options to solve this:

• 如果可以在各个单元之间保持一致，则可能会有所帮助.目前，您的版式高度为100％，这意味着单位应适合内容，但要fix，您可以采用这种方法

• If you are okay keeping the consistent between the units, then this might help. Currently your layout has a height of 100% that means the units should fit into the content, but to fix it you might take this approach

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

这样，您的最小高度为200像素，它可以随内容扩展，也可以只使用height:200px.

This way you have a minimum height of 200px and it could expand with the content, or just use height:200px.

另一个选择是使用!important选项定义CSS类，尽管很难使用!important，但在这种特殊情况下，PrimeFaces会将css注入到style属性中，从而很难级联高度选项.

The other option is to define a CSS class with !important option, although using !important is ugly and not recommended, but in this particular case PrimeFaces is injecting the css into the style attribute making it hard to cascade the height option.

<style>
   .westUnit {
     height: 200px !important;
   }
</style>

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

这篇关于如何在primefaces的layoutUnit中设置高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！