<pe:layoutPane is "squash" p:dialog

Community Driven Extensions Project
Post Reply
rcy
Posts: 102
Joined: 28 May 2012, 06:05

30 Jun 2012, 06:17

Hi,

My main ui contain 2 layout panels:
The West panel contained the menu bar and center will show the relevant jsf according to the selected menu:
small example:

Code: Select all

<h:form id="mainForm">
                <pe:layoutPane position="west" size="'16%'">  
                    <h:panelGroup id="menu">
                        <ui:include src="menu_bar.xhtml"/>
                    </h:panelGroup>
                </pe:layoutPane>  
                <pe:layoutPane position="center" size="'84%'">  
                    <h:panelGroup id="content">
                        <h:panelGroup rendered="${bean.menuName == dy_messages.OS}">
                            <ui:include src="first.xhtml"/>
                        </h:panelGroup>
In the first jsf I am using 2 dialogs that will popup one on the right side and the second on the left side of the screen.
Apparently when I activate the left p:dialog then the menu bar is "squashing" the dialog and the only way to see the all left dialog screen is by closing the menu bar panel.

Any suggestion why and how can i solve this issue ?

Thanks
Primefaces 5.0 | WebLogic Server Version: 12.1.1.0 | NetBeans 7.1| JDK 1.7.0_10 | Windows 7,FireFox,Google Chrome,IE 8+9

cagatay.civici
Prime
Posts: 17996
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

30 Jun 2012, 09:58

Moved to extensions forum.

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

30 Jun 2012, 18:11

This is well know and not an issue. The best way to solve this kind of issues is to place dialogs outside of layout. This is valid for p:layout or pe:layout, don't matter. Place dialogs after layout tag, close to body tag. Alternative you can set appendToBody="true" on 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

rcy
Posts: 102
Joined: 28 May 2012, 06:05

02 Jul 2012, 01:53

Regarding changing the dialog location I cant do it sine the dialog is part of the include file.
I try the appendToBode=true and it's working if the dialog include text for example:

Code: Select all

<p:dialog id="sqlDialog"
                  header="SQL Detail" 
                  widgetVar="sqlDialog"  
                  width="800" 
                  hideEffect="clip"
                  position="center"
                  appendToBody="true">
            <h:outputText value="dswdw/t"/>           
        </p:dialog>
But in my case the dialog include pe:codeMirror

Code: Select all

 <p:dialog id="dialog1" 
                  header="Detail" 
                  widgetVar="Dialog"  
                  width="800"  
                  hideEffect="clip"
                  position="left"
                  appendToBody="true">  
            <pe:codeMirror id="xml" 
                           mode="xml" 
                           readOnly="true" 
                           theme="eclipse" 
                           value="#{bean.selectedOS.xml}" 
                           lineNumbers="false"
                           lineWrapping="false"/>  
Which gives me the following error:
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MS-RTC LM 8; InfoPath.3; .NET4.0C; .NET4.0E)
Timestamp: Sun, 1 Jul 2012 23:36:39 UTC


Message: 'this.form.0.id' is null or not an object
Line: 4088
Char: 3
Code: 0
.....javax.faces.resource/codemirror/codemirror.js.jsf?ln=primefaces-extensions-uncompressed&v=0.4.0


Message: Object doesn't support this property or method
Line: 2
Char: 1
Code: 0


Message: Could not complete the operation due to error 80020101.
Line: 16
Char: 5884
Code: 0
..../javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&v=3.2
I guess it's because of the update in command button:

Code: Select all

  <p:commandButton id="Button1" 
                                 value="View" 
                                 icon="ui-icon-search"
                                 oncomplete="dialog1.show()"
                                 update=":mainForm:xml"
                                 style="float: right"/>
This piece of code was working great before adding the appendToBody.

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

02 Jul 2012, 09:43

If you use appendToBody="true", you should have a form (h:form) inside dialog. This is a main rule and was discussed in the PrimeFaces core forum. So, you should surround pe:codeMirror with a h:form.
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

rcy
Posts: 102
Joined: 28 May 2012, 06:05

02 Jul 2012, 15:18

i add the h:form and indeed it's working but ...
unfortunately i now get duplicate dialog's :{
after refreshing the screen the duplicate is disappear

I will open a new post on this issue

Thanks for the help.
Primefaces 5.0 | WebLogic Server Version: 12.1.1.0 | NetBeans 7.1| JDK 1.7.0_10 | Windows 7,FireFox,Google Chrome,IE 8+9

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests