Bug when using modal inside datatable

[luccotta]

I'm using PrimeFaces 4.0

Please, take a look in my code bellow. In my understanding I had to put the modal inside the datatable in order to access the "var" from the datatable.

The bug is: intermittently, a big blank space appear bellow the button "numbersButton", for each line in my datatable. This space has the same height as my modal. So it's like sometimes the JSF tries to show the modal when the user enter in the page, but then it remembers it is a modal, does not show it anymore, but leave its space there. Does anybody have any idea how could I avoid this?

Thanks!

Code: Select all

<p:dataTable 
	id="lotteryTicketsTable" 
	var="lotTicTableVar"
	value="#{myBean.lotteryTicketList}"
	editable="true" 
	editMode="cell" 
	styleClass="geralBorderless">

	<p:column headerText="Lottery ticket name" >
		<p:inputText
			value="#{lotTicTableVar.name}"
			id="empName" />			
	</p:column>

	<p:column headerText="Lottery ticket numbers" >

		<p:commandButton 
			value="Click to insert chosen numbers" 
			id="numbersButton" 
			update=":form:lotteryTicketsTable:numbersModal"
			oncomplete="modalNumbers.show();" >
		</p:commandButton>

		<p:dialog 
			id="numbersModal" 
			closable="false" 
			widgetVar="modalNumbers" 
			modal="true" 
			closeOnEscape="false" 
			resizable="false" >

			<p:dataGrid 
				id="numbersTable" 
				var="numTableVar"
				value="#{lotTicTableVar.numberList}"
				columns="10" 
				editable="true" 
				editMode="cell">

				<table><tr><td>
							<p:inputMask maxlength="2" mask="99" 
								value="#{numTableVar.number}" 
								id="number"
							/>
				</td></tr></table>

			</p:dataGrid>
			
			<p:commandButton id="save" 
				value="Save and Close" 
				actionListener="#{lotTicTableVar.verifyNumber}"
				update="numbersTable" 
				oncomplete="modalNumbers.hide()"
			/>
				
		</p:dialog>

	</p:column>
</p:dataTable>

[kukeltje]

No idea where you found an example like this. Check the first one here: http://www.primefaces.org/showcase/ui/d ... tion.xhtml

[luccotta]

Well, that only made the intermittent blank space appear somewhere else.
But I googled it a little more and in the end this CSS solved my issue:

Code: Select all

.ui-dialog{        
       position: fixed !important;
}

Thanks!

[kukeltje]

Weird fix. .. never needed that. But if it works for you