CODEWITHSUNDEEP
jsfprimefacesdialog
Hosam
Hosam

Reputation: 11

Primefaces dialog position issue

I am using primefaces v 8.0 I am facing an issue with p:dialog component it's position is not to the top and half of the dialog is not shown i've tried many things also tried to change CSS as follows :

.ui-dialog{
     top: 0px !important;
 }

following the code I use :

<p:dialog header="#{msg.image_description}" widgetVar="imageDescriptionDlg" id="imageDescriptionDlg"
                  dynamic="true"
                  showEffect="fade" width="70%" height="650" draggable="false"
                  hideEffect="fade">
            <div class="ui-g">

I am using the same component in other views but not facing this issue of dialog being down and part of it not shown as it is under the bottom of the screen

Upvotes: 1

Views: 581

Answers (2)

Frank Cornelis
Frank Cornelis

Reputation: 91

Try adding:

onShow="PF('widgetNameOfTheDialogHere').initPosition()"

to your p:dialog.

Upvotes: 0

Melloware
Melloware

Reputation: 12039

Two things...try to add these two properties to your dialog.

  1. fitViewport="true" Dialog size might exceeed viewport if content is bigger than viewport in terms of height. fitViewport option automatically adjusts height to fit dialog within the viewport.

  2. responsive="true" In responsive mode, dialog adjusts itself based on screen width.

I have a feeling one or both of these settings will solve your issues.

Doc reference for PF 8.0: https://primefaces.github.io/primefaces/8_0/#/components/dialog?id=dialog

Upvotes: 1

Related Questions