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.

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

Datepicker: Fixed incorrect position on position:fixed elements #1935

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

staaky
Copy link

@staaky staaky commented Aug 5, 2020

Datepicker offsets are not calculated the same across methods. This causes incorrect positioning when a datepicker is attached to a bordered element within a position:fixed container after the page is scrolled.

I've changed _showDatepicker to use outerHeight() when measuring the input, so it matches the calculation in _checkOffset. This way _checkOffset no longer tries to compare two differently calculated offsets.

@jsf-clabot
Copy link

jsf-clabot commented Aug 5, 2020

CLA assistant check
Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

@chadrschroeder
Copy link

Thank you for making this change. We're also seeing this issue when the browser zoom isn't at 100%, the page is scrolled down, and then a fixed position modal form is displayed which contains a datepicker.

For example, when the zoom is at 100% we'll have something like:

// In _showDatepicker, input.offsetHeight is "36"
$.datepicker._pos[ 1 ] += input.offsetHeight; // add the height

// In _checkOffset, inst.input.outerHeight() is "36"
inputHeight = inst.input ? inst.input.outerHeight() : 0,

// In _checkOffset, this calculation works correctly and $(document).scrollTop() is subtracted
offset.top -= ( isFixed && offset.top === ( inst.input.offset().top + inputHeight ) ) ? $( document ).scrollTop() : 0;

When the zoom is at 80% we'll have something like:

// In _showDatepicker, input.offsetHeight is "38"
$.datepicker._pos[ 1 ] += input.offsetHeight; // add the height

// In _checkOffset, inst.input.outerHeight() is "37.7344"
inputHeight = inst.input ? inst.input.outerHeight() : 0,

// In _checkOffset, this calculation doesn't work correctly and the datepicker is positioned too far down on the page
offset.top -= ( isFixed && offset.top === ( inst.input.offset().top + inputHeight ) ) ? $( document ).scrollTop() : 0;

Base automatically changed from master to main February 19, 2021 19:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

4 participants