>Issue here is
> 1. My tool bar and north lay out is what shows up when I open the window >based on the business logic set up that I have done. When I click New Button I >have to open up up the center layout which in this case its working fine. I >have serious of business questions which I have to show up in center layout >page and I have added a p:scroll to enable the scrolling.
>2.How ever there is a edit link in the layout-north and When I click that >it goes to the same center layout page with data populated prefill, here I am >not able to get the complete scroll on my center lay out content and part of >the content is hidden in the scroll and I cannot scroll the entire page.
>Anyone, Please let me know what is missing here.
>Below is my code snippet
<!DOCTYPE HTML>
<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:cc="http://java.sun.com/jsf/composite/components"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<f:metadata>
<f:viewParam name="submissionId"
value="#{}" />
<f:viewAction action="#{}" />
</f:metadata>
<h:head>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>XXXXJavsS File</title>
<h:outputStylesheet library="css" name="content.css" />
<h:outputStylesheet library="css" name="navigation.css" />
<h:outputStylesheet library="css" name="jquery.alerts.css" />
<style type="text/css">
.ui-layout-unit {
z-index: 0 !important;
visibility: visible;
overflow: visible !important;
border:none;
}
.ui-layout-unit-content {
z-index: 25 !important;
overflow: visible !important;
}
.ui-layout-north {
z-index: 25 !important;
visibility: visible;
overflow: visible !important;
}
.ui-layout-north .ui-layout-unit-content {
overflow: visible !important;
}
</style>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="#{}" />
<h:outputStylesheet library="css" name="#{}"
rendered="#{}" />
<h:outputScript library="script" name="main.js" target="head" />
<h:outputScript library="script" name="jquery.alerts.js" target="head" />
<h:outputScript library="script/policy" name="XXXXJavsS.js" target="head" />
<h:outputStylesheet library="css" name="jquery.multiselect.css" />
<h:outputScript library="script" name="jquery.multiselect.min.js"
target="head" />
<script type="text/javascript">
pageId = "xxxx";
</script>
<h:form id="frmXXX" prependId="false">
<p:layout fullPage="true">
<p:layoutUnit id="north" position="north">
<div id="topNavContainer">
<p:toolbar>
<p:toolbarGroup align="left">
<cc:pageTitle titleName="XXXXJavsS File"
style="font-size:1.4em;padding-top:7px;" />
</p:toolbarGroup>
<p:toolbarGroup align="left" style="padding-top:3px;">
<p:separator />
<p:commandButton id="btnNew" ajax="false" value="New"
style="margin-right:10px;"
onclick="XXXXJavsS.disableOnBeforeLoadEvent();"
action="#{XXXXBean.createNewXXXXJavsS}" icon="ui-icon-newwin"
rendered="#{!XXXXBean.showUWXXXXJavsS}"
disabled="#{XXXXBean.readonly || XXXXBean.readonlyXXXXJavsS}" />
<p:separator style="margin: 0 3px" />
<p:commandButton id="btnDelete" type="button" ajax="false"
icon="ui-icon-trash" value="Delete"
onclick="XXXXJavsS.disableOnBeforeLoadEvent();XXXXJavsS.deleteClick();return false;"
rendered="#{!XXXXBean.showUWXXXXJavsS}"
disabled="#{XXXXBean.readonly || XXXXBean.readonlyXXXXJavsS || !XXXXBean.deleteXXXXJavsSFlag}" />
<p:separator style="margin: 0 3px" />
<p:commandButton id="btnSave" value="Save" icon="ui-icon-disk"
action="#{XXXXBean.save}"
rendered="#{XXXXBean.showUWXXXXJavsS}"
update=":frmSubmissionXXXXJavsSQuestions"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}" />
<p:separator style="margin: 0 3px" />
<p:commandButton id="btnCancel" value="Cancel"
icon="ui-icon-circle-close"
action="#{XXXXBean.cancelXXXXJavsS}"
rendered="#{XXXXBean.showUWXXXXJavsS}"
update=":frmSubmissionXXXXJavsSQuestions" />
</p:toolbarGroup>
</p:toolbar>
<p:commandButton id="btnDelete2" ajax="false"
action="#{XXXXBean.delete}" style="display:none;" />
<cc:submissionPopupHeader
submissionHeaderMap="#{XXXXBean.datamp}" />
<p:messages id="message" for="message" showSummary="true"
showDetail="true" />
</div>
<p:dataTable id="XXXXJavsSTblInfo"
value="#{XXXXBean.XXXXJavsSFilesList}" var="XXXXJavsS"
style="padding-top:15px;padding-bottom:15px;" rowKey="#{XXXXJavsS.id}"
selection="#{XXXXBean.deleteXXXXJavsSFile}"
selectionMode="single"
disabledSelection="#{XXXXBean.readonly}"
rendered="#{!XXXXBean.showUWXXXXJavsS}"
scrollable="true"
scrollHeight="550">
<p:ajax event="rowSelect"
listener="#{XXXXBean.rowEligibleForDelete}"
update=":btnDelete" />
<p:ajax event="rowUnselect"
listener="#{XXXXBean.rowEligibleForDelete}"
update=":btnDelete" />
<p:column headerText="XXXXJavsS Number" style="text-align:center">
<p:commandLink id="lnkEdit" update=":frmSubmissionXXXXJavsSQuestions"
actionListener="#{XXXXBean.edit(XXXXJavsS)}">
<h:outputText value="#{XXXXJavsS.id}" escape="false"
style="padding:5px" />
</p:commandLink>
</p:column>
<p:column headerText="XXXXJavsS Type" style="text-align:center">
<h:outputText value="#{XXXXJavsS.XXXXJavsSTypeNm}" />
</p:column>
<p:column headerText="XXXXJavsS Score" style="text-align:center">
<h:outputText value="#{XXXXJavsS.XXXXJavsSScore}" />
</p:column>
<p:column headerText="Status" style="text-align:center">
<h:outputText value="#{XXXXJavsS.XXXXJavsSStatusTypeNm}" />
</p:column>
<p:column headerText="Reviewed By" style="text-align:center">
<h:outputText value="#{XXXXJavsS.reviewedByPidNm}" />
</p:column>
<p:column headerText="Reviewed Date" style="text-align:center">
<h:outputText value="#{XXXXJavsS.reviewedDate}">
<f:convertDateTime type="date" pattern="yyyy-MM-dd" />
</h:outputText>
</p:column>
</p:dataTable>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<p:panel id="pgXXXXJavsS" rendered="#{XXXXBean.showUWXXXXJavsS}" toggleable="false" closable="false">
<p:scrollPanel mode="native" style="position:absolute;border:none;height:100%;">
<h:outputText style="width:100px" value="XXXXJavsS Type:" />
<p:selectOneMenu value="#{XXXXBean.selectedXXXXJavsSTypeCid}"
style="width:200px;vertical-align:middle;horizontal-align:middle;"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}">
<f:selectItems value="#{XXXXBean.XXXXJavsSTypes}" />
</p:selectOneMenu>
<p:fieldset id="dFieldSet1" legend="Quality of Underwriting"
style="margin:15px 3px 0px 3px;">
<p:focus context="dFieldSet1" />
<p:dataTable id="dtQOWQuestions" var="qow"
value="#{XXXXBean.qualityOfUWQuestions}"
style="width:100%">
<p:column headerText="XXXXJavsSed Measure" width="55%">
<h:outputText value="#{qow.qstnText}" />
</p:column>
<p:column headerText="Answer" width="12%">
<p:selectOneMenu value="#{qow.answerIndicator}"
style="width:100px;vertical-align:middle;horizontal-align:middle;"
rendered="#{qow.dropdown}"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}">
<f:selectItems value="#{XXXXBean.yesNoNAList}" />
</p:selectOneMenu>
<p:selectOneMenu value="#{qow.answerText}"
style="width:100px;vertical-align:middle;horizontal-align:middle;"
rendered="#{qow.textEntry}"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}">
<f:selectItems
value="#{XXXXBean.satisfactoryUnSatisfactoryList}" />
</p:selectOneMenu>
</p:column>
<p:column headerText="Comments" width="33%">
<h:inputText value="#{qow.answerComment}"
styleClass="width100p"
onkeypress="return mlm.noEnter(event);"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}"></h:inputText>
</p:column>
</p:dataTable>
</p:fieldset>
<p:fieldset id="dFieldSet2" legend="Risk Selection"
style="margin:15px 3px 0px 3px;">
<p:focus context="dFieldSet2" />
<p:dataTable id="dtriskSelectionQuestions" var="risk"
value="#{XXXXBean.riskSelectionQuestions}"
style="width:100%">
<p:column headerText="XXXXJavsSed Measure" width="55%">
<h:outputText value="#{risk.qstnText}" />
</p:column>
<p:column headerText="Answer" width="12%">
<p:selectOneMenu value="#{risk.answerIndicator}"
style="width:100px;vertical-align:middle;horizontal-align:middle;"
rendered="#{risk.dropdown}"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}">
<f:selectItems value="#{XXXXBean.yesNoNAList}" />
</p:selectOneMenu>
<p:selectOneMenu value="#{risk.answerText}"
style="width:100px;vertical-align:middle;horizontal-align:middle;"
rendered="#{risk.textEntry}"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}">
<f:selectItems
value="#{XXXXBean.satisfactoryUnSatisfactoryList}" />
</p:selectOneMenu>
</p:column>
<p:column headerText="Comments" width="33%">
<h:inputText value="#{risk.answerComment}"
styleClass="width100p"
onkeypress="return mlm.noEnter(event);"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}"></h:inputText>
</p:column>
</p:dataTable>
</p:fieldset>
<p:fieldset id="dFieldSet3" legend="Pricing"
style="margin:15px 3px 0px 3px;">
<p:focus context="dFieldSet3" />
<p:dataTable id="dtpricingQuestions" var="pricing"
value="#{XXXXBean.pricingQuestions}" style="width:100%">
<p:column headerText="XXXXJavsSed Measure" width="55%">
<h:outputText value="#{pricing.qstnText}" />
</p:column>
<p:column headerText="Answer" width="12%">
<p:selectOneMenu value="#{pricing.answerIndicator}"
style="width:100px;vertical-align:middle;horizontal-align:middle;"
rendered="#{pricing.dropdown}"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}">
<f:selectItems value="#{XXXXBean.yesNoNAList}" />
</p:selectOneMenu>
<p:selectOneMenu value="#{pricing.answerText}"
style="width:100px;vertical-align:middle;horizontal-align:middle;"
rendered="#{pricing.textEntry}"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}">
<f:selectItems
value="#{XXXXBean.satisfactoryUnSatisfactoryList}" />
</p:selectOneMenu>
</p:column>
<p:column headerText="Comments" width="33%">
<h:inputText value="#{pricing.answerComment}"
styleClass="width100p"
onkeypress="return mlm.noEnter(event);"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}"></h:inputText>
</p:column>
</p:dataTable>
</p:fieldset>
<p:fieldset id="dFieldSet4" legend="XXXXX"
style="margin:15px 3px 0px 3px;">
<p:focus context="dFieldSet4" />
<p:dataTable id="dtXXX" var="ar"
value="#{XXXXBean.XXX}"
style="width:100%">
</p:dataTable>
</p:fieldset>
<p:fieldset id="dFieldSet5"
legend="XXXX6"
style="margin:15px 3px 0px 3px;">
<p:focus context="dFieldSet5" />
<p:dataTable id="dtprocessQuestions" var="process"
value="#{XXXXBean.processOperationQuestions}"
style="width:100%">
</p:dataTable>
</p:fieldset>
<p:fieldset id="dFieldSet6" legend="Overall Comments"
style="margin:15px 3px 0px 3px;">
<table class="elements width100p" cellpadding="0"
cellspacing="3em">
</table>
</p:fieldset>
</p:scrollPanel>
</p:panel>
</p:layoutUnit>
</p:layout>
</h:form>
<p:ajaxStatus onstart="PF('statusDialog').show();"
onsuccess="PF('statusDialog').hide();" />
<p:dialog modal="true" widgetVar="statusDialog" header="Processing..."
draggable="false" closable="false" resizable="false">
<p:graphicImage value="../../resources/images/ajaxloadingbar.gif" />
</p:dialog>
</h:body>
</f:view>
</html>
Scroll bar issues in prime faces layout unit
Please format your code using code tags. There is no way any one can read this.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
And make it into an mcve http://stackoverflow.com/help/mcve
-
- Posts: 4
- Joined: 18 Oct 2018, 21:58
Code: Select all
<!DOCTYPE HTML>
<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:cc="http://java.sun.com/jsf/composite/components"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>XXXXJavsS File</title>
<h:outputStylesheet library="css" name="content.css" />
<h:outputStylesheet library="css" name="navigation.css" />
<h:outputStylesheet library="css" name="jquery.alerts.css" />
<style type="text/css">
.ui-layout-unit {
z-index: 0 !important;
visibility: visible;
overflow: visible !important;
border:none;
}
.ui-layout-unit-content {
z-index: 25 !important;
overflow: visible !important;
}
.ui-layout-north {
z-index: 25 !important;
visibility: visible;
overflow: visible !important;
}
.ui-layout-north .ui-layout-unit-content {
overflow: visible !important;
}
</style>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="#{}" />
<h:outputStylesheet library="css" name="#{}"
rendered="#{}" />
<h:outputScript library="script" name="main.js" target="head" />
<h:outputScript library="script" name="jquery.alerts.js" target="head" />
<h:outputScript library="script/policy" name="XXXXJavsS.js" target="head" />
<h:outputStylesheet library="css" name="jquery.multiselect.css" />
<h:outputScript library="script" name="jquery.multiselect.min.js"
target="head" />
<script type="text/javascript">
pageId = "xxxx";
</script>
<h:form id="frmXXX" prependId="false">
<p:layout fullPage="true">
<p:layoutUnit id="north" position="north">
<div id="topNavContainer">
<p:toolbar>
<p:toolbarGroup align="left">
<cc:pageTitle titleName="XXXXJavsS File"
style="font-size:1.4em;padding-top:7px;" />
</p:toolbarGroup>
<p:toolbarGroup align="left" style="padding-top:3px;">
<p:separator />
<p:commandButton id="btnNew" ajax="false" value="New">
</p:toolbarGroup>
</p:toolbar>
</div>
<p:dataTable id="XXXXJavsSTblInfo"
value="#{XXXXBean.XXXXJavsSFilesList}" var="XXXXJavsS"
style="padding-top:15px;padding-bottom:15px;" rowKey="#{XXXXJavsS.id}"
selection="#{XXXXBean.deleteXXXXJavsSFile}"
selectionMode="single"
disabledSelection="#{XXXXBean.readonly}"
rendered="#{!XXXXBean.showUWXXXXJavsS}"
scrollable="true"
scrollHeight="550">
<p:ajax event="rowSelect"
listener="#{XXXXBean.rowEligibleForDelete}"
update=":btnDelete" />
<p:ajax event="rowUnselect"
listener="#{XXXXBean.rowEligibleForDelete}"
update=":btnDelete" />
<p:column headerText="XXXXJavsS Number" style="text-align:center">
<p:commandLink id="lnkEdit" update=":frmSubmissionXXXXJavsSQuestions"
actionListener="#{XXXXBean.edit(XXXXJavsS)}">
<h:outputText value="#{XXXXJavsS.id}" escape="false"
style="padding:5px" />
</p:commandLink>
</p:column>
<p:column headerText="XXXXJavsS Type" style="text-align:center">
<h:outputText value="#{XXXXJavsS.XXXXJavsSTypeNm}" />
</p:column>
</p:dataTable>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<p:panel id="pgXXXXJavsS" rendered="#{XXXXBean.showUWXXXXJavsS}" toggleable="false" closable="false">
<p:scrollPanel mode="native" style="position:absolute;border:none;height:100%;">
<h:outputText style="width:100px" value="XXXXJavsS Type:" />
<p:selectOneMenu value="#{XXXXBean.selectedXXXXJavsSTypeCid}"
style="width:200px;vertical-align:middle;horizontal-align:middle;"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}">
<f:selectItems value="#{XXXXBean.XXXXJavsSTypes}" />
</p:selectOneMenu>
<p:fieldset id="dFieldSet1" legend="Quality of Underwriting"
style="margin:15px 3px 0px 3px;">
<p:focus context="dFieldSet1" />
<p:dataTable id="dtQOWQuestions" var="qow"
value="#{XXXXBean.qualityOfUWQuestions}"
style="width:100%">
<p:column headerText="XXXXJavsSed Measure" width="55%">
<h:outputText value="#{qow.qstnText}" />
</p:column>
<p:column headerText="Answer" width="12%">
<p:selectOneMenu value="#{qow.answerIndicator}"
style="width:100px;vertical-align:middle;horizontal-align:middle;"
rendered="#{qow.dropdown}"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}">
<f:selectItems value="#{XXXXBean.yesNoNAList}" />
</p:selectOneMenu>
<p:selectOneMenu value="#{qow.answerText}"
style="width:100px;vertical-align:middle;horizontal-align:middle;"
rendered="#{qow.textEntry}"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}">
<f:selectItems
value="#{XXXXBean.satisfactoryUnSatisfactoryList}" />
</p:selectOneMenu>
</p:column>
<p:column headerText="Comments" width="33%">
<h:inputText value="#{qow.answerComment}"
styleClass="width100p"
onkeypress="return mlm.noEnter(event);"
disabled="#{XXXXBean.readonly or XXXXBean.readonlyXXXXJavsS}"></h:inputText>
</p:column>
</p:dataTable>
</p:fieldset>
</p:scrollPanel>
</p:panel>
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</f:view>
</html>
-
- Posts: 4
- Joined: 18 Oct 2018, 21:58
Sorry about that, I have just refactored my code to make it simple, Issue here is When I click New button I can get the page layout - center with complete scroll but when I use the edit option I can get the center lay out page but i cannot scroll the whole page.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 19 guests