After we integrated Volt-Layout-2.0, the Whole web page can not scroll down in IE(tested IE 9 and 11). (both Chrome and Firefox are works)
Description:
Once drag scrollbar down or press [down] via keyboard, the web page will scroll down, but at the same time page scroll up to top immediate. seems the page is flicking.
Can help to advise? Template page as below. thanks.
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view contentType="text/html;charset=utf-8">
<f:event listener="#{}" type="preRenderView" />
<h:head>
<f:facet name="first">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=9" /> -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge" />-->
<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>
<h:outputStylesheet library="primefaces" name="primefaces.css" />
<h:outputStylesheet library="primefaces"
name="fileupload/fileupload.css" />
<h:outputScript library="primefaces" name="fileupload/fileupload.js" />
<h:outputScript library="primefaces-extensions"
name="primefaces-extensions.js" />
<h:outputStylesheet library="css" name="custom-pf-dataTable.css" />
<f:loadBundle basename="messages-itrust" var="msgItruest" />
<h:outputScript name="js/layout.js" library="volt-layout" />
<ui:insert name="head" />
</h:head>
<h:body style="overflow-y: auto" styleClass="GreenBody PopupMenu" onload="setContentDivHeight();initSession();">
<ui:include src="/xhtml/common/topbar.xhtml" />
<div id="layout-portlets-cover">
<div id="layout-portlets-cover-indent">
<div id="layout-portlets-table">
<div id="layout-portlets-tablerow">
<div id="layout-portlets-tablecell-left">
<div id="layout-menu-cover">
<!-- <ui:include src="layoutmenu.xhtml" /> -->
<ui:include src="/xhtml/common/MenuList.xhtml" />
</div>
</div>
<div id="layout-portlets-tablecell-right">
<!-- <ui:insert name="content">
Template
</ui:insert> -->
<div style="margin-top: 0px;" id="contentDivId">
<p:panel id="main" style="padding:0em">
<p:outputPanel>
<h:form id="breadCrumbForm">
<p:layout fullPage="false" widgetVar="myBreadCrumbWgt"
style="height: 35px;">
<p:layoutUnit position="center" style="height: 20px; width: auto;">
<p:breadCrumb model="#{breadCrumbController.model}" />
</p:layoutUnit>
</p:layout>
</h:form>
<ui:include src="#{commonPageLayout.mainIncludePage}" />
</p:outputPanel>
</p:panel>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Container100 TexAlCenter White Fs14 FontVoltLight Opac60">
<div class="EmptyBox30"></div>
Last Update : <h:outputText value="#{}"></h:outputText> | © <h:outputText value="#{session.lastAccessedTime}">
<f:convertDateTime pattern="yyyy" type="date" /></h:outputText>
<div class="EmptyBox30"></div>
</div>
<p:confirmDialog widgetVar="sessionTimeoutCfmDlg"
header="Session Timeout Warning" width="500" severity="alert"
id="sessionTimeoutDialog" message="">
<div align="center">
<f:facet name="message">
<h:outputText id="sessionTimeoutCfmMsg"
value="The current session is about to time out in 30 seconds. Do you want to extend the session?"
escape="false" />
</f:facet>
<h:form id="sessionTimeoutCfmForm">
<p:commandButton value="Yes"
onclick="sessionTimeoutCfmDlg.hide();resetLeftTime();" />
<p:commandButton value="No" oncomplete="gotoLoginForm();"
actionListener="#{}" />
</h:form>
</div>
</p:confirmDialog>
<pe:blockUI widgetVar="blockUIWidget">
<h:panelGrid columns="2">
<h:outputText value="Please wait.." />
<br />
<p:graphicImage value="images/ajaxloadingbar.gif" />
</h:panelGrid>
</pe:blockUI>
<script type="text/javascript">
$(window).resize(function(){
setContentDivHeight();
});
function setContentDivHeight() {
var height = getContentHeight();
$("#mylayoutWdgt").css("height", height).children().css({"min-height":height-4,"max-height":height-4}).children(".ui-layout-unit-content").css("height", height-4);
$("#taxonomyLayoutUnit > .ui-layout-unit-content").css("height",height-32);
}
function getContentHeight(){
var topBarHeight = $("#layout-topbar").height();
return window.innerHeight - topBarHeight;
}
var isSessionTimerNeed = "#{}";
var sessionDuration = #{};
function initSession(){
resetLeftTime();
if(isSessionTimerNeed == "Y"){
setInterval(function(){
sessionDuration = sessionDuration - 1;
var msg = document.getElementById("sessionTimeoutCfmMsg");
if(sessionDuration == 30){
msg.innerHTML = "The current session is about to time out in "+ sessionDuration + " seconds. Do you want to extend the session?";
sessionTimeoutCfmDlg.show();
}else if(sessionDuration < 30 && sessionDuration > 0){
msg.innerHTML = "The current session is about to time out in "+ sessionDuration + " seconds. Do you want to extend the session?";
}else if(sessionDuration < 0){
gotoLoginForm();
}
},1000);
}
}
function resetLeftTime(){
sessionDuration = #{login.getSessionTimeoutInDuration()};
}
</script>
<h:form>
<p:remoteCommand name="persistRows"
action="#{}" process="@this"
global="true" />
<p:remoteCommand name="ERSAuditEventProvider"
action="#{}" process="@this"
global="true" />
<p:remoteCommand name="OnClickBreadCrumbForTaxoEvent"
action="#{}" process="@this"
global="true" />
<p:remoteCommand name="onClickBreadCrumbForFolderEvent"
action="#{}" process="@this"
global="true" />
</h:form>
<h:outputStylesheet name="css/core-layout.css" library="volt-layout" />
<h:outputStylesheet name="css/animate.css" library="volt-layout" />
<h:outputStylesheet name="css/volt-font.css" library="volt-layout" />
<h:outputStylesheet name="css/font-awesome.css" library="volt-layout" />
<h:outputStylesheet name="css/volt-layout.css" library="volt-layout" />
</h:body>
</f:view>
</html>
