Upgrading to PF 10: Dialog fitViewport="true" not rendering max-height anymore

[kwutzke]

Hello,

we're upgrading to PrimeFaces 10 currently.

Our application is highly dialog-driven and we make use of fitViewport="true" frequently. Large dialogs, that is when their contents gets very high/long vertically, don't display a vertical scrollbar anymore.

Here's our dialog:

Code: Select all

    <p:dialog id="order-wizard-dialog"
              widgetVar="orderWizardDialog"
              header="Add Order"
              onShow=""
              onHide=""
              modal="true"
              blockScroll="true"
              position="center top"
              width="60vw"
              fitViewport="true"
              closable="true"
              closeOnEscape="false"
              resizable="false"
              responsive="true"
              dynamic="true">
        
		<some potentially high content exceeding the browser viewport/screen>
        
        <p:messages id="order-wizard-msgs"
                    showSummary="true"
                    showDetail="true"
                    globalOnly="false"
                    styleClass="clear-both"/>
        
        <f:facet name="footer">
			<p:commandButton id="order-wizard-save-button"
							 icon="fa fa-save"
							 value="Save"
							 action="..."
							 process="@this ..."
							 update="... order-wizard-msgs ..."
							 onstart="..."
							 oncomplete="..." />
			<p:commandButton id="order-wizard-cancel-button"
							 icon="fa fa-close"
							 value="Cancel"
							 process="@this"
							 update="@none"
							 onstart="PF('orderWizardDialog').hide();" />
			<div class="clear-both" />
        </f:facet>
        
    </p:dialog>

Note the fitViewport="true" and resizable="false" here.

When looking at what PrimeFaces 8 produces as final HTML code (the content panel), I noticed that the CSS max-height style is missing.

PrimeFaces 8 produced:

Code: Select all

<div class="ui-dialog-content ui-widget-content" id="order-wizard-dialog_content" style="height: auto; max-height: 315.222px;">

PrimeFaces 10 produces:

Code: Select all

<div class="ui-dialog-content ui-widget-content" id="order-wizard-dialog_content" style="height: auto;">

The dialogs themselves never scale to the viewport, likely because of this.

I couldn't find anything in the PrimeFaces 10 migration guide stating changes to the <p:dialog>: https://primefaces.github.io/primefaces ... ide/10_0_0

Maybe I missed something?

What would be the fix/workaround, given that fact, that max-height is a calculated, fractional value? Use some CSS calc() to do it?

Thanks
Karsten

--- EDIT ---

This is a workaround so far:

Code: Select all

.ui-dialog-content.ui-widget-content {
    /* PF 10 workaround using CSS calc(): 100% view height - title - footer - margins top/bottom - ?? */
    max-height: calc(100vh - 50.25px - 68px - 20px - 34px);
}

It comes close to what we need, but I'd nontheless like to know why the respective CSS is missing in PF 10.

[kwutzke]

No one knows?

No one recognized it?

No one had a look?

Hmmm...

The PF Showcase doesn't have an example using fitViewport="true": https://www.primefaces.org/showcase/ui/ ... fwid=1785a

Can anyone please confirm this problem?

[kwutzke]

https://github.com/primefaces/primeface ... /dialog.md

the fitViewport attribute still exists in PF 10...

[Melloware]

Looks like its fixed in 10.0.2 and MonkeyPatch provided here: https://github.com/primefaces/primefaces/issues/7139

So you can patch your code easily.

[kwutzke]

Thanks for helping