Scroll bar issues in prime faces layout unit

UI Components for JSF
Post Reply
karthikselva1987
Posts: 4
Joined: 18 Oct 2018, 21:58

19 Oct 2018, 22:17

>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>

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

20 Oct 2018, 13:12

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

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

20 Oct 2018, 15:10

And make it into an mcve http://stackoverflow.com/help/mcve

karthikselva1987
Posts: 4
Joined: 18 Oct 2018, 21:58

22 Oct 2018, 17:53

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>

karthikselva1987
Posts: 4
Joined: 18 Oct 2018, 21:58

22 Oct 2018, 17:55

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.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 19 guests