Help

Built with Seam

You can find the full source code for this website in the Seam package in the directory /examples/wiki. It is licensed under the LGPL.

In JSF, the recommended UI component to use for layout purposes is <h:panelGrid> which renders a <table>.

The following code will allow you to vertically top align three <h:dataTable> components in a <h:panelGrid>.

xhtml: 

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:s="http://jboss.com/products/seam/taglib"
	template="/templates/normal.xhtml">

	<ui:define name="body">
	     

	     	<head>			    
			    <style>
                   div.divTop TD {vertical-align:top;}				
				</style>    
			</head> 	
	     	
	     	<div class="divTop">
					
			     	 <h:panelGrid columns="3" border="1" width="100%">
			     		<h:dataTable value="#{foo1}" var="name">
			     			<h:column>
			     				<h:outputText value="#{name}"/>
			     			</h:column>
			     		</h:dataTable>
			     		<h:dataTable value="#{foo2}" var="name">
			     			<h:column>
			     				<h:outputText value="#{name}"/>
			     			</h:column>
			     		</h:dataTable>
			     		<h:dataTable value="#{foo3}" var="name">
			     			<h:column>
			     				<h:outputText value="#{name}"/>
			     			</h:column>
			     		</h:dataTable>     	
			     	</h:panelGrid>
							     	
	     	</div>
	     	
     </ui:define>
     
     
</ui:composition>

JavaBean: 

@Name("testTopAlignBean")
@Scope(ScopeType.CONVERSATION)
public class TestTopAlignBean implements Serializable {
	
	@DataModel
	private List<String> foo1; 
	
	@DataModel
	private List<String> foo2; 
	
	@DataModel
	private List<String> foo3; 
	
	@Factory("foo1")
	public void getFoo1()
	{
		foo1 = new ArrayList<String>();
		foo1.add("Adam");
		foo1.add("Bee");
		foo1.add("Gee");
	}
	
	@Factory("foo2")
	public void getFoo2()
	{
		foo2 = new ArrayList<String>();
		foo2.add("Jen");		
	}
	
	@Factory("foo3")
	public void getFoo3()
	{
		foo3 = new ArrayList<String>();
		foo3.add("A");
		foo3.add("B");
		foo3.add("C");
		foo3.add("D");
		foo3.add("E");
		foo3.add("F");
		foo3.add("G");
	}
	
	
}