Skip to main content

Removing the border from header layout unit

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
<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
Labels:

Comments

Post a Comment

Popular posts from this blog

Breaking down the CRM monolith

In my previous posts, I have shared some theory regarding microservices. But it's time to start some implementation. I love to write code and see and feel things working. So I will start a series to refactor a monolithic CRM system and transform it into microservices based flexible software. Big ball of mud. Customer Relationship Management(CRM) is that giant software which existed since time immemorial and is used by all companies in some form or shape. Big enterprises will buy CRM software (also known as packages) from top CRM vendors like Oracle, SAP, Salesforce etc and then employ an army of consultants to try and implement it. Most of the classic CRM systems in the market today, even if deployed on the cloud are the big monolithic ball of mud. They are the gigantic piece of software with the huge feature set. Most often those requirements are surplus to the requirement or they will not fit into the processes of the company. So the company has to hire these certified consu...
1 comment
Read more

Part 3 - Integrating Tiles, Thymeleaf and Spring MVC 3

In this post I will demonstrate how to integrate Apache Tiles with Thymeleaf. This is very simple. The first step is to include the tiles and thymeleaf-tiles extension dependencies. I will include them in the pom.xml. Note we wil lbe using Tiles 2.2.2 Listing 1 - parent/pom.xml --- thymeleaf-tiles and tiles dependencies <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <!-- Tiles --> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-core</artifactId> <version>${tiles.version}</version> <scope>compile</scope> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-template</artifactId> <version>${tiles.version}</version> <scope>compile</s...
5 comments
Read more

CKEDITOR 3.x - Simplest Ajax Submit Plugin

  I have assumed that you have downloaded and got started with CKEDITOR. Step 1 – The html file is shown below: <html> <head> <title>Writer</title> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <style> .cke_contents { height: 400px !important; } </style> </head> <body> <form action="sample_posteddata.php" method="post"> <textarea id="editor" > </textarea> <script type="text/javascript"> //<![CDATA[ CKEDITOR.replace( 'editor', { fullPage : true, uiColor : '#9AB8F3', toolbar : 'MyToolbar' }); //]]> </script> </form> </body> </html> Note that the jquery js...
3 comments
Read more