Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Menu: wrong calculated position with overlay="true"

See original GitHub issue

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>

Issue Analytics

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

Top GitHub Comments

1reaction

OBreidenbachcommented, Feb 28, 2019

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

1reaction

mertsincancommented, Feb 14, 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/