primefaces: Menu: wrong calculated position with overlay="true"

1) Environment

PrimeFaces version: 7.0.RC2
Application server + version: Tomcat 7 and 9
Affected browsers: All

2) Expected behavior

Calculated position of tag p:menu (overlay=“true”) on p:dialog is not dependent on the position of the scroll bar main window.

3) Actual behavior

Calculated position of tag p:menu (overlay=“true”) on p:dialog is dependent on the position of the scroll bar main window.

4) Steps to reproduce

Create page with vertival scroll bar. Open p:dialog with button with p:menu (overlay=“true”). p:menu position is dependent on the location of the scroll bar.

5) Sample XHTML

<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:p="http://primefaces.org/ui">

<h:head>
</h:head>

<h:body style="height: 1500px;">
	<p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" />

	<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" position="top" height="150">
		<h:form>
			<h:outputText value="This is a Modal Dialog." />
			<h3>Overlay</h3>
			<p:commandButton id="dynaButton" value="Show menu" type="button" />
			<p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
				<p:menuitem value="Save" />
				<p:menuitem value="Update" />
			</p:menu>
		</h:form>
	</p:dialog>
</h:body>
</html>

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 33 (30 by maintainers)

Most upvoted comments

I checked ColorPicker, SelectOneMenu and Menu(overlay=true). They all scroll fine in a Dialog positionTyp=“absolute”.

OBreidenbach on Feb 28, 2019

Please try this example; test.txt

I made some changes in align and show methods of Menu widget.

show: function() {
    this.jq.css({
        'z-index': ++PrimeFaces.zindex,
        'visibility': 'hidden'
    }).show();

    this.align();
    this.jq.css('visibility', '');
},
...
align: function () {
    this.jq.css({left: '', top: ''}).position({
        my: this.cfg.my
        ,at: this.cfg.at
        ,of: this.trigger
    });
}

Position API Note: jQuery UI does not support positioning hidden elements. Please see; https://api.jqueryui.com/position/

mertsincan on Feb 14, 2019