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.

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

Calendar: Opens under input field which is at bottom of page #4295

Closed
babubabu opened this Issue Nov 29, 2018 · 6 comments

Comments

Projects
None yet
5 participants
@babubabu
Copy link

babubabu commented Nov 29, 2018

1) Environment

  • PrimeFaces version: 6.2.11, 6.2.12
  • Application server + version: Tomcat 8.5.32 /Jetty 9.4.11
  • Affected browsers: Firefox 63.0.3, IE 11.785, Chrome 70.0.3538.110

2) Expected behavior

If an p:calendar field is located at the bottom of the page and the datepicker opens, the datepicker open above the field and not under.

3) Actual behavior

The datepicker open under the field and the body gets bigger.

4) Steps to reproduce

Scroll to field and click into it.

5) Sample XHTML

<h:head>
    <title>PrimeFaces Test</title>
</h:head>
<h:body>

    <h1>#{testView.testString}</h1>

    <h1>#{testViewCdi.testString}</h1>

    <h:form>
        <div style="height: 300px;">just to fill viewport</div>

        <p:calendar value="#{testView.myDate}" />
    </h:form>

</h:body>

6) Sample bean

package org.primefaces.test;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import java.io.Serializable;
import java.util.Date;

@ManagedBean(name = "testView")
@ViewScoped
public class TestView implements Serializable {

private String testString;
private Date myDate;

@PostConstruct  
public void init() {
    testString = "Welcome to PrimeFaces!!!";
}

public String getTestString() {
    return testString;
}

public void setTestString(String testString) {
    this.testString = testString;
}

public Date getMyDate() {
    return myDate;
}

public void setMyDate(Date myDate) {
    this.myDate = myDate;
}

}

@tandraschko

This comment has been minimized.

Copy link
Member

tandraschko commented Nov 29, 2018

probably the jquery datepicker doesn't have such a colission detection.

@wujianbin-sh

This comment has been minimized.

Copy link

wujianbin-sh commented Dec 19, 2018

I find one solution to fix this problem:
In the generated package /primefaces-6.3.jar
Open this file: META-INF/resources/primefaces/jquery/jquery-plugins.js and modify it as below:

Find the line 15810 like this.updateDatePickerPosition = function (inst) {
At the end of this function definition, at about line 15826, add one line code like this:
this.updateDatePickerPosition(inst);
This will call the function to adjust calendar's position.

@melloware

This comment has been minimized.

Copy link
Contributor

melloware commented Dec 19, 2018

@wujianbin-sh Are you suggesting at the end of the function to call itself recursively? Won't that cause an infinite loop?

@wujianbin-sh

This comment has been minimized.

Copy link

wujianbin-sh commented Dec 20, 2018

@wujianbin-sh Are you suggesting at the end of the function to call itself recursively? Won't that cause an infinite loop?

No, not call it in its body,
Just after its definition body, like this:

//its definition starts here:
this.updateDatePickerPosition = function (inst) {
....
}
//its definition ends here

//then add code after its definition here:
this.updateDatePickerPosition(inst);
@melloware

This comment has been minimized.

Copy link
Contributor

melloware commented Dec 21, 2018

Test case that proves the problem:
pf-4295.zip

@melloware

This comment has been minimized.

Copy link
Contributor

melloware commented Dec 21, 2018

@wujianbin-sh Your fix worked perfectly and I just submitted a PR.

tandraschko added a commit that referenced this issue Dec 24, 2018

Merge pull request #4343 from melloware/PF4295
Fix #4295: Calendar position properly on open at bottom of screen.

@tandraschko tandraschko added this to the 6.3 milestone Dec 24, 2018

@mertsincan mertsincan added the 6.2.14 label Jan 7, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment