Dialog contained in a layoutunit

akh · 21 May 2010, 17:49

Hi Guys,
I am using Primefaces layout. I want to create a dialog inside the center layoutunit which i should be able to move around on top of all the other layoutunits as well, My problem is that if i create a dialog inside a layoutunit that hides behind if i scroll it over other layoutunits.
I have tried z-index and overflow attributes as well but with no luck.

Can some one suggest something by looking at the following example code.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<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:ui="http://java.sun.com/jsf/facelets"
		xmlns:p="http://primefaces.prime.com.tr/ui">
	
<f:view contentType="text/html">
<h:head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</h:head>

<h:body class="yui-skin-sam">
	<p:layout fullPage="true" >
		<p:layoutUnit position="top" height="75" >
			<span class="titleMain">Some Centre</span>
		</p:layoutUnit>
		
		<p:layoutUnit position="bottom" height="40"  >
				<div id="version">
					Version 2.1.1.0 Released 20/05/2010
				</div>
	         </p:layoutUnit>
		
		<p:layoutUnit position="left" width="200"  >
			<h:form>
				<p:growl id="growl" showDetail="true" />
					<p:panel header="Growl">
					<h:panelGrid columns="2">
						<h:outputLabel value="Your Name: *" onclick="dlg.show()"/> 
						<h:inputText value="#{growlBean.text}" required="true" label="Name"/>
						<h:outputText />
						<p:commandButton value="Save" actionListener="#{growlBean.save}" update="growl"/>
					</h:panelGrid>
					</p:panel>
			</h:form>
		</p:layoutUnit>
		
		<p:layoutUnit position="center" >
			    <p:dialog widgetVar="dlg" modal="false" style="position:relative; z-index:50;" effect="FADE" effectDuration="0.5" >
				   <h:panelGrid columns="1" style="margin-bottom:10px" onclick="dlg.hide()">
				     <p:panel >
  					<h:outputLabel for="Users" value="#{bundle.Users}" styleClass="title13"/>
  					<h:outputLabel id="Users" value="test" styleClass="textnormal"/>
  				     </p:panel>
				    </h:panelGrid>
			    </p:dialog>
			
		</p:layoutUnit>
		
	</p:layout>

</h:body>

</f:view>
</html>

Regards,
adnan

28 May 2010, 01:04

You can also try setting scrollable="null" on layoutunits and setting zindex on layoutunits. LayoutUnit has scrollable and zindex attributes added specifically for this purpose.

gus315 · 10 Aug 2010, 05:19

Hi Cagatay,

My dialog displays on the top of the center layoutunit, but it displays behind of top, left and right layoutunits. When I set scrollable = "null", my dialog displays on the top of all layoutunits, but there is no scrollable feature in the center. However, I need the scrollable feature in the center layoutunit. How can I solve the issue? Thanks a lot.

Sheng

Dialog contained in a layoutunit

Who is online