Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fitViewport in dialog does consider header/footer height #899

Closed
matthiasblaesing opened this issue Nov 22, 2015 · 5 comments
Closed

fitViewport in dialog does consider header/footer height #899

matthiasblaesing opened this issue Nov 22, 2015 · 5 comments
Assignees
@tandraschko
Labels
🐞 defect Bug...Something isn't working
Milestone
6.2

Comments

@matthiasblaesing
Copy link

The facelets page below should show a dialog with a content, that is to large to fit on the window. It is expected, that the dialog content is sized, so that header an footer fit the window.

Currently after clicking on "Show Dialog" the dialog is correctly opened, but the footer is invisible (outside the window to the south). When the dialog is resized, the dialog snaps to the right size.

The test was done with:

primefaces 5.3
payara 4.1.153

Client browsers Firefox 42, Chromium 45 and IE 11

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        <title>Demo fitViewport</title>
    </h:head>
    <h:body>
        <h:form>
            <p:commandButton  type="button" onclick="PF( 'Test' ).show()" value="Show Dialog"/>

            <p:dialog id="Test" widgetVar="Test" header="Test" fitViewport="true" modal="true">
                <div style="height: 2000px">
                    Demo content
                </div>
                <f:facet name="footer">
                    <p:commandButton type="button" onclick="PF( 'Test' ).hide()" value="Hide Dialog"/>
                </f:facet>
            </p:dialog>
        </h:form>
    </h:body>
</html>
@matthiasblaesing
Copy link
Author

Ok - I found a work-around: Hook into the postShow function and use css to make the content scrollable:

var origPostShow = PrimeFaces.widget.Dialog.prototype.postShow;

PrimeFaces.widget.Dialog.prototype.postShow = function () {
    this.initSize();
    origPostShow.apply( this );
};

PrimeFaces.widget.Dialog.prototype.fitViewport = function () {
    var winHeight = $( window ).height();
    var contentPadding = this.content.innerHeight() - this.content.height();

    this.content.css("max-height", (winHeight - this.titlebar.outerHeight() - contentPadding - this.footer.outerHeight()) + "px" );
    this.content.css("overflow", "auto");
};

@pablocastrobarbosa
Copy link

good @matthiasblaesing , I had seen this problem and solved in a very similar way

`//Considers the footer size in the calculation if exists footer
PrimeFaces.widget.Dialog.prototype.fitViewport = function() {
var winHeight = $(window).height();
contentPadding = this.content.innerHeight() - this.content.height();
if (this.jq.innerHeight() > winHeight) {
this.content.height(winHeight - this.titlebar.innerHeight() - contentPadding - (this.footer ? this.footer.innerHeight() : 0));
}
};

//Saves the postShow event in a new event to be used later
PrimeFaces.widget.Dialog.prototype.origPostShow = PrimeFaces.widget.Dialog.prototype.postShow;

//Overwrite the event postShow calling fitViewport event
PrimeFaces.widget.Dialog.prototype.postShow = function () {
this.fitViewport();
this.origPostShow();
};`

@b0rengar
Copy link

b0rengar commented Sep 6, 2016

Same Problem here. Thanks a lot for your work-arounds! An official fix would be nice!

@b0rengar
Copy link

b0rengar commented Sep 12, 2016 •
edited

There is still a Problem when the window is resized (e.g. screen is rotated on mobile).

@vbors
Copy link

vbors commented Oct 26, 2016

In fitViewport function there is a problem with getting right sizes if the dialog has dynamic = "true", because dialog is hidden.

my solution was:
var innerPadding; var titleHeight; if (!this.isVisible()) { this.jq.show();//show to get size(for hidden is not right size) titleHeight = this.titlebar.innerHeight(); innerPadding = this.content.innerHeight() - this.content.height(); this.jq.hide();//hide after getting size } else { titleHeight = this.titlebar.innerHeight(); innerPadding = this.content.innerHeight() - this.content.height(); }

@vonnai vonnai mentioned this issue Mar 24, 2017
Merged
@melloware melloware mentioned this issue Apr 3, 2017
Closed
tandraschko added a commit that referenced this issue Jul 10, 2017
@tandraschko
Merge pull request #2201 from vonnai/fix-#899
097129d 
fix #899: enhance dialog fitViewport funcionality
@tandraschko tandraschko self-assigned this Jul 10, 2017
@tandraschko tandraschko added this to the 6.2 milestone Jul 10, 2017
@tandraschko tandraschko added the 🐞 defect Bug...Something isn't working label Jul 10, 2017
tandraschko added a commit that referenced this issue Jul 10, 2017
@tandraschko
#166, #2062, #1862, #899
f7ca62a
@brunoaandrade brunoaandrade mentioned this issue Jun 15, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tandraschko tandraschko

Labels
🐞 defect Bug...Something isn't working
Projects
None yet
Milestone
6.2
Development

No branches or pull requests
5 participants
@b0rengar @matthiasblaesing @tandraschko @vbors @pablocastrobarbosa