As you have seen the layout contains layout units. You can put any element inside a layout unit. Now there is a border for each layout unit. For our online store, I do not want the border and the header title. In order to remove the border, you will need to override the CSS style and to remove the header just remove the header attribute (header="TOP") from the layout unit tag. This is shown in listing below
The result is shown in figure below
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<f:view contentType="text/html">
<h:head>
<title>Simple Store - Home</title>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/themes/cupertino/skin.css" />
<style>
.ui-layout-unit-top .ui-layout-bd {
border: 0;
}
</style>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="top" height="80">
<h:outputText value="Top content." />
</p:layoutUnit>
<p:layoutUnit position="bottom" header="BOTTOM" height="100">
<h:outputText value="Bottom content." />
</p:layoutUnit>
<p:layoutUnit position="left" header="LEFT" width="300">
<h:outputText value="Left content" />
</p:layoutUnit>
<p:layoutUnit position="right" header="RIGHT" width="200">
<h:outputText value="Right Content" />
</p:layoutUnit>
<p:layoutUnit position="center" header="CENTER">
<h:outputText value="Center Content" />
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
The result is shown in figure below
Good ..how about removing the annoying scrollbars?
ReplyDelete