Optional way to position p:dialog at top of active window

[RElliott]

I recently struggle with positioning p:dialog as documented in the following URL.

http://forum.primefaces.org/viewtopic.php?f=3&t=43756

After much trial and error, I settled on the following p:dialog configuration with javascript solution:

Code: Select all

<p:dialog
    id="file-select-dialog"
    header="Select File"
    widgetVar="file-select-dialog"
    width="calc(100% - 50px)"
    modal="true"
    responsive="true"
    onShow="positionDialog('#{p:component('file-select-dialog')}')">

Code: Select all

function positionDialog(id) {

	var dialog = document.getElementById(id);
	var anchor = $("#layout-topbar");

	$(dialog).position({
		"my": "center top",
		"at": "center bottom-10",
		"of": $(anchor)
	})
	
}

[mert.sincan]

Optimus;

Try using position utility;

http://jqueryui.com/demos/position/

dialogWidgetVar.getJQ().position({
//your settings here
});


or

dialogWidgetVar.initPosition();

I agree with optimus. You can try with;

Code: Select all

<script type="text/javascript">
    function test() {
        var anchor =  $("#layout-topbar");

        PF('dlg1').getJQ().position({
            "my": "center top",
            "at": "center bottom-10",
            "of": anchor
        });
    }
</script>

//XHTML
<p:dialog widgetVar="dlg1" onShow="test()">