pe:layout (strange) issue
Posted: 18 Oct 2018, 15:28
Hi,
due to the fact that layout it going to disappear from primefaces I have tried to check the PE option but found a "strange" behavior that I am trying to solve for the last couple of days with no success. Namely, when the layout is refreshed I am able to LITERALLY SEE how the panes' sizes/position are calculating and "jumping" all over the page (especially when the panes contains some heavy stuff inside - than this jumping may take 3-5 secs). Of course in the showcase everything is ok (details below)
The page:
Now, my page source:
Now when I compare my page source with the PE showcase what looks different is:
And finally when I debug in chrome and compare with the PE showcase (preview frame) one can see that "pane jumping" (marked with red - on mine there is a phase when the layout is OK - then the form is changed again to some basics - and finally comes back to the desired original shape. In PE showcase form is not changed from the beginning):
Do you have any idea where/what/etc ? Getting desperate .....
Tricks like "primefaces.MOVE_SCRIPTS_TO_BOTTOM" didn't help ...
Regards,
herbu
Checked with primefaces 6.0 ,6.2 and PE 6.2.8 and 6.2.9
due to the fact that layout it going to disappear from primefaces I have tried to check the PE option but found a "strange" behavior that I am trying to solve for the last couple of days with no success. Namely, when the layout is refreshed I am able to LITERALLY SEE how the panes' sizes/position are calculating and "jumping" all over the page (especially when the panes contains some heavy stuff inside - than this jumping may take 3-5 secs). Of course in the showcase everything is ok (details below)
The page:
Code: Select all
<!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: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.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<pe:head title="PrimeFaces Extensions - ShowCase">
<f:facet name="first">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
</f:facet>
</pe:head>
<body >
<h:form id="form">
<pe:layout fullPage="true" >
<pe:layoutPane position="north" size="80" closable="false" >
</pe:layoutPane>
<pe:layoutPane position="center">
<pe:layoutPane position="north" size="50%" resizerTip="Resize North" togglerTipClosed="Close North" togglerTipOpen="Open North" sliderTip="Slide North">
<f:facet name="header">
<h:outputText value="Center-North"/>
</f:facet>
</pe:layoutPane>
<pe:layoutPane position="center" minHeight="60" resizerTip="Resize North" togglerTipClosed="Close North" togglerTipOpen="Open North" sliderTip="Slide North">
<f:facet name="header">
<h:outputText value="Center-Center"/>
</f:facet>
</pe:layoutPane>
</pe:layoutPane>
<pe:layoutPane position="west" size="200">
<pe:layoutPane position="north" size="33%" resizerTip="Resize West" togglerTipClosed="Close West" togglerTipOpen="Open West" sliderTip="Slide West">
West-North
</pe:layoutPane>
<pe:layoutPane position="center" minHeight="60" resizerTip="Resize West" togglerTipClosed="Close West" togglerTipOpen="Open West" sliderTip="Slide West">
West-Center
</pe:layoutPane>
<pe:layoutPane position="south" size="33%" initClosed="true" resizerTip="Resize West" togglerTipClosed="Close West" togglerTipOpen="Open West" sliderTip="Slide West">
West-South
</pe:layoutPane>
</pe:layoutPane>
<pe:layoutPane position="east" size="200" resizeWhileDragging="true">
East
</pe:layoutPane>
<pe:layoutPane position="south" size="80">
South
</pe:layoutPane>
</pe:layout>
</h:form>
</body>
</html>
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2"><link type="text/css" rel="stylesheet" href="/asr/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/asr/javax.faces.resource/layout/layout.css.xhtml?ln=primefaces-extensions&v=6.2.9" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" /></head>
<body>
<form id="form" name="form" method="post" action="/asr/login.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />
<div id="form:j_idt5" class="ui-layout-north ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="north"></div><div id="form:j_idt6" class="ui-layout-center ui-corner-all pe-layout-pane-withsubpanes" data-combinedposition="center"><div id="form:j_idt7" class="ui-layout-north ui-widget-content ui-corner-all" data-combinedposition="center_north"><div class="ui-widget-header ui-corner-top pe-layout-pane-header">Center-North</div><div class="ui-layout-content pe-layout-pane-content" style="border:none"></div></div><div id="form:j_idt9" class="ui-layout-center ui-widget-content ui-corner-all" data-combinedposition="center_center"><div class="ui-widget-header ui-corner-top pe-layout-pane-header">Center-Center</div><div class="ui-layout-content pe-layout-pane-content" style="border:none"></div></div></div><div id="form:j_idt11" class="ui-layout-west ui-corner-all pe-layout-pane-withsubpanes" data-combinedposition="west"><div id="form:j_idt12" class="ui-layout-north ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="west_north">
West-North
</div><div id="form:j_idt14" class="ui-layout-center ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="west_center">
West-Center
</div><div id="form:j_idt16" class="ui-layout-south ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="west_south">
West-South
</div></div><div id="form:j_idt18" class="ui-layout-east ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="east">
East
</div><div id="form:j_idt20" class="ui-layout-south ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="south">
South
</div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-3976525847373284923:5888258982713293879" autocomplete="off" />
</form>
<script type="text/javascript" src="/asr/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.2">
</script>
<script type="text/javascript" src="/asr/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=6.2"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/core.js.xhtml?ln=primefaces&v=6.2"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/primefaces-extensions.js.xhtml?ln=primefaces-extensions&v=6.2.9"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/layout/layout.js.xhtml?ln=primefaces-extensions&v=6.2.9"></script>
<script type="text/javascript">var pf=window.PrimeFaces;if(pf){pf.settings.locale='pl_PL';};
pf.cw("ExtLayout","widget_form_j_idt4",{id:"form:j_idt4",clientState:false,full:true,serverState:false,options:{"defaults":{"tips":{}},"north":{"spacing_closed":6,"size":"80","closable":false,"spacing_open":6,"tips":{}},"south":{"spacing_closed":6,"size":"80","spacing_open":6,"tips":{}},"west":{"spacing_closed":6,"size":"200","spacing_open":6,"tips":{},"children":{"north":{"spacing_closed":6,"size":"33%","spacing_open":6,"tips":{"Slide":"Slide West","Resize":"Resize West","Close":"Close West","Open":"Open West"}},"south":{"spacing_closed":6,"size":"33%","spacing_open":6,"initClosed":true,"tips":{"Slide":"Slide West","Resize":"Resize West","Close":"Close West","Open":"Open West"}},"center":{"minHeight":"60","spacing_closed":6,"spacing_open":6,"tips":{"Slide":"Slide West","Resize":"Resize West","Close":"Close West","Open":"Open West"}}}},"east":{"spacing_closed":6,"size":"200","spacing_open":6,"resizeWhileDragging":true,"tips":{}},"center":{"spacing_closed":6,"spacing_open":6,"tips":{},"children":{"north":{"spacing_closed":6,"size":"50%","spacing_open":6,"tips":{"Slide":"Slide North","Resize":"Resize North","Close":"Close North","Open":"Open North"}},"center":{"minHeight":"60","spacing_closed":6,"spacing_open":6,"tips":{"Slide":"Slide North","Resize":"Resize North","Close":"Close North","Open":"Open North"}}}}}});
</script></body>
</html>
Code: Select all
<script type="text/javascript" src="/asr/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.2"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=6.2"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/core.js.xhtml?ln=primefaces&v=6.2"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/primefaces-extensions.js.xhtml?ln=primefaces-extensions&v=6.2.9"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/layout/layout.js.xhtml?ln=primefaces-extensions&v=6.2.9"></script>
And finally when I debug in chrome and compare with the PE showcase (preview frame) one can see that "pane jumping" (marked with red - on mine there is a phase when the layout is OK - then the form is changed again to some basics - and finally comes back to the desired original shape. In PE showcase form is not changed from the beginning):
Do you have any idea where/what/etc ? Getting desperate .....
Tricks like "primefaces.MOVE_SCRIPTS_TO_BOTTOM" didn't help ...
Regards,
herbu
Checked with primefaces 6.0 ,6.2 and PE 6.2.8 and 6.2.9