How can I set the height in layoutUnit of primefac

Question

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>

Answer 1

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

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:

• 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;">
  

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

• 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">
  

Answer 2

Have a look at the CSS priority rules: http://www.standardista.com/css3/css-specificity/

You can simply overwrite the primefaces CSS rules by adding more specific CSS selectors.

Example :

Primefaces:

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

Your CSS:

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

You can use the browser debugging tools (F12 in most browsers) to find out witch primefaces css is used for your components. Overwrite them with more specific CSS selectors from your own css code.