<p:calendar> display problem with <p:panel> under IE

jekkil · 16 Oct 2009, 16:45

Hi,

I have tested my simple page under firefox without any problem.
But when trying to see the result under IE, I get a different behaviour.

Here is the page:

Code: Select all

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="p" uri="http://primefaces.prime.com.tr/ui"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<f:view>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>PAMON</title>
	<p:resources />
	</head>
	<body>
	<h:outputLabel value="INES Monitoring" styleClass="page-title" />
	<h:form id="mainForm" prependId="false">

		<p:layout height="768">
			<p:layoutUnit position="left" width="250" resize="true">
				<p:panel header="Time" styleClass="filterPanels">
					<p:calendar title="Start" value="#{transBean.filterStartDate}"
						pattern="dd/MM/yyyy">
					</p:calendar>
					<p:calendar title="End" value="#{transBean.filterEndDate}"
						pattern="dd/MM/yyyy" />
				</p:panel>
				<p:panel header="Interface">
					<h:selectOneMenu id="interface"
						value="#{transBean.filterInterface}">
						<p:ajax event="change" update="action_type" />
						<f:selectItem itemLabel="All" itemValue="" />
						<f:selectItem itemLabel="NGIN" itemValue="NGIN" />
						<f:selectItem itemLabel="FIONA" itemValue="FIONA" />
					</h:selectOneMenu>
				</p:panel>
				<p:panel>
					<p:commandButton id="doFilter" update="transactionsTable"
						action="#{transBean.applyFilter}" value="Show transactions"
						async="true">
					</p:commandButton>
				</p:panel>
			</p:layoutUnit>

			<p:layoutUnit position="center">
				<p:dataTable id="transactionsTable" var="transaction" rows="20"
					value="#{transBean.transactions}" paginator="true"
					paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink}">
					<p:column>
						<f:facet name="header">
							<h:outputText value="Response Type" />
						</f:facet>
						<h:outputText value="#{transaction.responseType}" />
					</p:column>
				</p:dataTable>
			</p:layoutUnit>
		</p:layout>

	</h:form>
	</body>
</f:view>
</html>

As you can see I have the following structure
<p:layout>
<p:layoutUnit>
<p:panel id="one">
<p:calendar id="cal1">
<p:calendar id="cal2">
</p:panel>
<p:panel id="two">
... something
</p:panel>

When I click on the calendar "cal1", it displays under panel "two" with IE. With Firefox, it's displayed correclty.

Any idea how I can solve this ?

jekkil · 19 Oct 2009, 09:45

Am I the only one to experience this problem ?

19 Oct 2009, 12:18

Can you try settign the zindex of the panel to a lower number using style or styleClass attributes?

jekkil · 19 Oct 2009, 13:23

I have tried this, it help a little in fact.
My calendar now shows over the panels of the underlying elements.
But when clicking on the icon to open the calendar, the popup shows on the right of the icon (in FF, it shows under the the "inputtext" zone)
and my problem is that on the right I have another <p:layoutUnit> (see my first post) and the calendar popup goes under this part :-/

And on the layout itself, I can not set an z-index apparently ...

One solution would be to force the popup under the inputtext zone and not at the right of the icon, any idea how to force this in IE6 ?

By looking at the doc of the YUI components, it seems that IE6 is really a pain in the ass, because they do have to handle it as exception ...

19 Oct 2009, 13:38

Doesn't playing with z-index of a layout unit help?

Code: Select all

.yui-layout-unit-right {
z-index: indexhere;
}

jekkil · 19 Oct 2009, 14:23

Not a bad idea, but it does not solve the problem.
I have dropped the <p:layout> usage to avoid this

<p:calendar> display problem with <p:panel> under IE

Who is online