Dialog does not display correctly with PrimeFaces 3.0.M3

sebek · 01 Sep 2011, 19:40

Hello,

I have recently upgraded to PrimeFaces 3.0.M3 and found that the dialogs do not display the content correctly.

Specifically, the body of the dialog is always offset to the right by the width of the header.

The following simple code demonstrates the problem:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<f:view contentType="text/html">

	<h:head>
	</h:head>

	<h:body>

		<h:panelGrid columns="1" cellpadding="5">
			<p:commandButton id="modal1" value="Modal 1" onclick="dlg1.show();"
				type="button" />

		</h:panelGrid>

		<p:dialog header="Modal 1 Dialog" widgetVar="dlg1" modal="true"
			height="100">
			<h:outputText value="Modal dialog number 1." />

			<p:commandButton id="modal2" value="Modal 2" onclick="dlg2.show();"
				type="button" update="" />
		</p:dialog>

		<p:dialog header="Modal 2 Dialog" widgetVar="dlg2" modal="true"
			height="100">
			<h:outputText value="Modal dialog number 2." />
		</p:dialog>

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

Below are some screenshots for major browsers:

- Chrome 13:

- Firefox 6:

- IE 9:

If anyone can help me resolve this issue, I would greatly appreciate it.

Thank You.

sebek · 01 Sep 2011, 20:26

I have added screenshots for major browsers.

jim@jimtough.com · 01 Sep 2011, 20:29

Some of the attributes have changed for <p:dialog> recently. Maybe one or more of the following attributes could be added to what you already have and see if it fixes the problem?

Code: Select all

resizable="false"
position="center center"
height="123"
width="456"
appendToBody="true"

I only mention the width because I found the effects on my dialog did not display nicely unless the dialog was defined with a fixed width and height. The appendToBody is necessary for me, but that may have something to do with IE 7. The position attribute is new and can accept values like "left top" or "right bottom".

jim@jimtough.com · 01 Sep 2011, 20:31

The screenshots make it clearer. The attributes I mentioned probably won't help with that. Sorry.

Looks like a CSS block element problem.

sebek · 01 Sep 2011, 20:34

Jim, thanks for the suggestions. Unfortunately, none of the attributes listed above resolved the display issue.

sebek · 01 Sep 2011, 20:37

I agree. I think it is a CSS issue.

The same browsers display the dialog fine on the Showcase 3 page.

My test page is very similar to the showcase dialog page. I cannot figure out why the two pages are rendered differently.

sebek · 28 Sep 2011, 20:23

Ok, so I found the root cause and the solution.

In PrimeFaces 3.0.M3 in dialog.css, you have:

.ui-dialog .ui-dialog-titlebar {
height: 14px; <-- This is the problem
padding: 0.4em 0 0.4em 1em;
position: relative;
}

To resolve it, put the following in your application's css:

/* BUG FIX - should be checked and removed with 3.0 Production */
.ui-dialog .ui-dialog-titlebar {
height: auto !important;
}

The trunk for PrimeFaces 3.0.RC1 does not have the height attribute, so this should not be an issue in later releases.

Dialog does not display correctly with PrimeFaces 3.0.M3

Who is online