Problem with p:layout inside of p:dialog

UI Components for JSF
Post Reply
ax1e2
Posts: 5
Joined: 06 Jul 2011, 16:58

06 Jul 2011, 17:13

Hi all,

I have a modal dialog declared directly in the body of of a page, which contains a layout component with two layout units. When the dialog is shown, the layout component does not show up. The same functionality used to work in PrimeFaces 2.2, but no longer works in 3.0. I was able to reproduce the problem with a simple page, part of which I borrowed from the showcase. Can anyone shed any light on this? I am using PrimeFaces 3.0M2 on Mojarra 2.1 and Glassfish 3.1 on Windows platform. The code for a sample page is attached below:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Test</title>
    </h:head>
    <h:body>

        <h:form id="form1">
            <p:commandButton value="Test" onclick="pointDlg.show();" />
        </h:form>

        <p:dialog header="Test Dialog" widgetVar="pointDlg" resizable="false" modal="true"
                  minHeight="400"
                  minWidth="1020">
            <p:panel header="Layout Container">
                <p:layout style="width: 960px; height: 350px;" id="layout">
                    <p:layoutUnit position="west" resizable="true" size="100" minSize="40" maxSize="200">
                        Left
                    </p:layoutUnit>

                    <p:layoutUnit position="center">
                        Center
                    </p:layoutUnit>
                </p:layout>
            </p:panel>
            <h:form id="form2">
                <p:panel>
                    <p:commandButton  value="Cancel" oncomplete="pointDlg.hide();"/>
                </p:panel>
            </h:form>
        </p:dialog>
    </h:body>
</html>

Thanks for your help,

Ax1e

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

06 Jul 2011, 17:20

Hi,

This should work without any effort (if PrimeFaces team implemented all right). Look here please http://layout.jquery-dev.net/tips.cfm#Widget_Dialog
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin


ax1e2
Posts: 5
Joined: 06 Jul 2011, 16:58

06 Jul 2011, 17:29

Yes, it used to work in 2.2. I don't know what happened in 3.0 - possibly some jQuery integration issues? I've tried rearranging the code a few different ways and changing the attributes on the layout component to no avail. Interestingly enough, when fullPage is turned on, the layout does render, but, of course its size and appearance are way off. I've tried looking at this in Firebug and for starters it appears that the ui-layout-unit CSS class has its visibility style set to hidden. Once I disable that setting, the units do show up, but the layout and spacing are incorrect.


ax1e2
Posts: 5
Joined: 06 Jul 2011, 16:58

06 Jul 2011, 17:42

Hi Optimus,

What I am trying to accomplish is to build an Explorer-style view inside of a modal dialog. The mailbox example has a complex layout component on the main page and the Compose button brings up a dialog. I an trying to do the opposite - I have a fairly simple main page that brings up a dialog with a resizable layout inside of it. The Compose button example seems to open a dialog with a set of fields in it, but are those fields enclosed in layout units?

Thanks,

Ax1e

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

06 Jul 2011, 17:53

I think you gave a wrong example, Cagatay. ax1e2 wants to have a layout WITHIN dialog. As I already said, it should work, here is an example of the layout widget within dialog which is used in PF 3.x http://layout.jquery-dev.net/demos/layo ... ialog.html
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

ax1e2
Posts: 5
Joined: 06 Jul 2011, 16:58

06 Jul 2011, 17:57

Yes, Oleg's example demonstrates exactly what I am trying to accomplish, but I can't seem to get the layout to render properly.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

06 Jul 2011, 18:11

AFAIK fullPage layout is applied to the body. You don't need a fullPage layout in my opinion. Your layout container is the context of the dialog. Sorry, I can not provide more infos, no time for investigations. Try to understand how the jQuery Layout works.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

ax1e2
Posts: 5
Joined: 06 Jul 2011, 16:58

06 Jul 2011, 18:25

I only used the fullPage layout to see if it would change the rendering behavior, which it did, but the result was not what I wanted. I can, of course, explore jQuery Layout in more detail, but I am curious if this is something odd like an integration issue between jQuery and PF, since a similar jQuery example seems to work. It could also be the structure of the dialog I am trying to create. I can try and remove the button container panel off it, just to see if everything renders OK.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 61 guests