ZK already comes with numerous layout components that provides users with a lot of options to create flexible, complex yet simple to use layouts.

Q:Need highly flexible layout that allows different parts of your application UI hide/unhide?

A: Use borderlayout.

Q:Need structured layouts such as n-column layout or tabular layout?

A: Use Columnlayout or tablelayout.

Most of these layout components are smart with regards to their sizes and children component positions which means that if either the container layout or children components are resized, then all of them will be resized or adjusted according to their width/height preferences which are usually set by specifying vflex/hflex and/or width/height attributes.

However, sometimes users might want to keep certain components at a specific position within their container components no matter how the container or children components are resized. To satisfy this particular need, we have created a ZK custom component called “absolutelayout” that contains absolutechildren components. An absolutechildren component can contain any other ZK components and can be positioned within their parent absolutelayout component by specifying x and y attributes or calling setX() and setY() methods on them.

Version: 0.8.0

ZK Version: applicable to 5.0.7 and later

Usage:

Absolutelayout components are only allowed to have “absolutechildren” as their children components. Absolute positions of absolutechildren components can be specified by x and y attributes. If not specified, x and y defaults to zero. Also, if a negative value is specified, zero is assumed. By default, “absolutelayout” sets style as “overflow:hidden”, hence, any child component that is positioned outside view port set by width and height will not be accessible. It is highly recommended for users to explicitly set style as “overflow:auto” in such cases for absolutelayout components.

Here is a sample snippet for an absolutelayout and absolutechildren in action.


	
		
			
				
					
				
			
			
				
					
				
			
			
				
					PanelContent1
				
			
		
	

 

Download:

 

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

4 Responses to “Absolutelayout component”

  1. Anonmyous says:

    Nice. But don’t forget to tune this page first, it’s looking terrible in Chrome!

  2. Thanks very much it is fixed now!

  3. welders says:

    I had an issue with my footer in Mozilla but all other browsers were ok. Your post helped me sort it out so now my footer behaves itself. Thanks

  4. davout says:

    I’ve hit a problem with putting overlapped windows inside a absolutechildren tag.

    If the window has mode=overlapped then the absolutechildren x/y position is ignored

Leave a Reply