Primeng: p-dialog doesn't overflow as expected, when content (image) is too large

[ITSBThorstenKoch]

We show images with p-dialog instead of lightbox and realized, that the overflow looks like not working correct. this is our p-dialog code:

<p-dialog [header]="processImageHeader" [(visible)]="displayProcessImage" [responsive]="true" [width]=1000 [showEffect]="fade" [modal]="true"> <img src="{{ processImageUrl }}" alt="{{ processImageHeader }}" /> <footer> <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <button type="button" pButton icon="fa-close" (click)="displayProcessImage=false" label="Schliessen"></button> </div> </footer> </p-dialog>

The image loaded has more width and more height that the dialog, but the scrollbars are not like expected. we expect scrollbars in the ui-dialog-content, so that title and footer are fixed and visible all the time. There are no scrollbars at all. What shall we do?
Footer and Header are loaded in the Compontent.

[supriya2992]

@ITSBThorstenKoch did you find a way to solve this issue? I have a similar problem

[RobNordon]

+1 I've found this occurs even with textual content / basic HTML.

[howlettt]

One possible fix:

1. Set a height on the dialog, ex: <p-dialog [height]="300"
2. Add the following css style, adjusting the 38px to the height of the header + footer
   .ui-dialog .ui-dialog-content { height: calc(100% - 38px); }

[luchillo17]

Should take in account the custom footer, in my case the header is 38px, but footer is 65px.

[dhniels]

+1

[luchillo17]

@dhniels Use the emojis to express +1 in the specific comment you want, or the issue description itself for the issue.

+1 comments don't give value to the conversation aside of bloating the comments feed, emoji feature was added for that purpose, there's a lot of issues out there with lots of +1 that make the issue harder to scan, that makes it harder for the devs who have to read once and again all comments to understand the context of the issue.

Now that you know spread the word so we stop this +1 chain.

[cagataycivici]

I'd suggest using contentStyle property to customize the content section for your content like, giving overflow or giving height.