Dialog position - Unable to move or close

UI Components for JSF
Post Reply
meriellen
Posts: 6
Joined: 08 Aug 2011, 18:52

08 Aug 2011, 20:40

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.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

08 Aug 2011, 20:42

What PF version do you use?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

meriellen
Posts: 6
Joined: 08 Aug 2011, 18:52

08 Aug 2011, 21:01

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:

Code: Select all

<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.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

08 Aug 2011, 21:15

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 Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

meriellen
Posts: 6
Joined: 08 Aug 2011, 18:52

08 Aug 2011, 21:45

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.

meriellen
Posts: 6
Joined: 08 Aug 2011, 18:52

17 Aug 2011, 21:55

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.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 17 guests