Creator Tip: Using CSS Layout Technique

Some Creator customers have asked if the page-fragments can be placed such a way that a single page can be subdivided in to 4 parts:

• The first part is the top of the page where the user puts the application name and application's logo.
• The second part comes after the top part and uses 20% of the screen width in the left side. In this part, user would like to put a tree view component representing the menu of the application.
• The third part is the place where user wants to launch the page (customer form for example). This part is resides besides the second part and uses 80% of the screen width.
• The final part is the place below the 2nd and 3rd part where user puts the page footer.

The best approach is to provide a Layout Component to lay out the components added to it, may be using a <table> element. In the absence of such a component, let us see how this can be done. Here is a hint on how to achieve this using CSS Layout Technique.

Let us use three page-fragments for header, footer and side navigation bar. For the middle let us use a LayoutPanel with Grid-Layout so that user can set the components in absolute layout mode. Now do the following

Page Fragment1

• Set the width 100%
• Set the height as 10% or 100px

Page Fragment2

• Set the width 20% or 150px
• Set the height as 500px or 100%

Page Fragment3

• Set the width 100%
• Set the height as 10% or 100px

Note: Percentage works fine in Firefox but fails in IE6. So better to use pixels than percentage at least for Page Fragment height, to support correctly in IE. The height and width can be set using the property sheet of each page fragment.

The components can be added to the page fragments in the usual manner. I've added StaticText with some text that displays location of the page-fragment and the Layout Panel.

Add the following to the resources/stylesheet.css

.top{ 
  background-color: #ccccff; 
  bottom: auto; 
  height: 10%; 
  left: 0; 
  position: fixed; 
  right: 0; 
  top: 0; 
  width: 100% 
} 
.left{ 
  background-color: #ffffcc; 
  color: #000000; 
  height: 80%; 
  left: 0;  
  position: fixed; 
  top: 10%; 
  width: 20%; 
  overflow : auto 
} 
.bottom { 
  background-color: #ccffcc; 
  bottom: 0; 
  height: 10%; 
  position: fixed; 
  right: 0; 
  top: auto; 
  width: 100% 
}

Now add the three page-fragments to a page. When each page-fragment is added  an enclosing <div> is added for each page-fragment in the page. This is visible in the outline. Select the <div> in the out line and unset the style property on each of the <div> (Note: This is import other wise settings in the style property takes precedence. Now set the styleClass of each page-fragment as top for header , left for navigation, bottom for footer.

Add a LayoutPanel to the page. Set its style property as

background-color: #abaaed; position: absolute; width: 80%; height: 80%; left: 20%; top: 10% 

If you deploy the application you should see something like in the picture below. Try resizing the page in the browser and see the results. If percentage is used, the resizing of the page fragments will be much more fluid (works well in Firefox). 

PS: I've tested this only with Firefox and IE 6. Firefox is more accurate in positioning the page-fragments  using %. IE has some overlap and shrinks to fit the page fragment content . Experiment with pixels (ex. height=500px instead of 100% for left navigation page fragment) to get better results uniformly on all browsers.

Posted at 10:16AM Dec 13, 2005  |  Permanent link to this entry