Board index JavaServer Faces General Dialog position - Unable to move or close

Dialog position - Unable to move or close

Components, Ajax Framework, Utilities and More.


Posts: 6
I have a problem using the dialog component.

I have a Web Application and in one of the pages, there is a dataTable. When the user clicks in one of the rows of the dataTable, a dialog window opens with more details of that row.

However, when the information inside the dialog is very large, the dialog window becomes very big and stay under some buttons I have in the same page. When this happens, the dialog window seems to become static and the user is unable to move or close the window. The problem only disappears when the user hits the refresh button of the browser. By the way, this problem seems to happen only on IE. When I use Firefox, the problem doesn't occur. But I need this page to work on IE also.

Had anyone ever faced that kind of issue and know what might be the cause?

Thanks is advance.

Oleg User avatar
Expert Member

Posts: 3702
Location: Russia, Siberia => Germany, Black Forest
What PF version do you use?
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/


Posts: 6
I'm sorry, I forgot to post the version I'm using.
I'm using PrimeFaces 2.2 RC2 with JSF 2.0.

Here is a fragment of the code I'm using:

<p:dialog header="Detalhes" position="center" widgetVar="detailDialog" modal="false" resizable="false" draggable="true" showEffect="clip" hideEffect="hide" width="800"> 
<h:panelGrid id="displaySingle" columns="2" cellpadding="4">
<h:column>
<h:outputText value="Value:" styleClass="labelForm" />
</h:column>
<h:column>
<h:outputText value="#detailMb.selectedDetail.value}" />
<br/><br/>
</h:panelGrid>
</p:dialog>

Thank you.

Oleg User avatar
Expert Member

Posts: 3702
Location: Russia, Siberia => Germany, Black Forest
This is an issue with jQuery based dialogs. They can not be moved out of visible view and look like static dialogs. I suppose to do dialogs smaller. Don't make big dialog, better integrate details view in the same flow where the master view is (e.g. with wizard or breadcrumb navigation between them).
PrimeFaces 4.x, 5.x, Mojarra 2.2.x, JBoss WildFly, WebSphere, Windows 8.1, IntelliJ IDEA
PrimeFaces Cookbook: http://ova2.github.com/primefaces-cookbook/ PrimeFaces Extensions on GitHub: http://primefaces-extensions.github.com/


Posts: 6
Thanks for the quick answer. However, the problem occurs not only when the dialog is very large, but also when it first opens in the top position, even when I force the position="center" attribute. Then, the window stays under the menu buttons, as if the buttons went over the dialog. I tried to modify the z-index attribute of both the menu buttons and the dialog, but it did not work. Is there another atribute like z-index that I could use to put the dialog above all other objects? Maybe this could solve the problem.

Also, do you happen to know why this problem does not occur in Mozilla Firefox?

I want to attach a printscreen of the page with the problem, but I don't know how. How can I do this?

Thank you very much.


Posts: 6
Thank you very much for the help.

However, after a while, I finally found the problem and it had nothing to do with Primefaces.

There is a CSS file where I forced a z-index value for the menus, so that it would always put it in a lower layer. I altered this atribute and then, the problem was solved.

Thanks a lot for the aid.


Return to General