.fdatepicker('place') is not working

[vinuengico]

My datepicked is always taking the top value relative to the body tag. I have a long webpage and the input[type="text"] triggering the datepicker.

The form is inside a modal popup which again is triggered from the bottom of page.

I tried "$("#portalStartDate").fdatepicker('place');" but the datepicker is still taking top relative to the body tag. Adding a screengrab below to make question more clear. Please note when modal opens the body scrollbar is hidden.

[babobski]

Was having the same problem that offset of the datepicker was wrong.
Found out what is causing this issue.

When you open the reveal (modal), it puts a negative top value on the html tag.
This is causing the datepicker to be displayed on the wrong place.
You can fix this by recalculating the top position on the open event of the datepicker.

To make it work you could do something like this:

$('#datePicker').fdatepicker({
    // Datepicker options
}).on('show', function(){
    var datePicker = $(this); // Datepicker input
    if (datePicker.parents('.reveal').length > 0) { // if one of the parents has a reveal class where in a modal
        setOffsetTopInReveal(datePicker); // recalc the top position
    }
});

function setOffsetTopInReveal(datepicker) {
    var offsetTop       = datepicker.offset().top, // Offset from top of window
        html            = document.getElementsByTagName('html')[0], // get html tag
        negativeOffset  = Math.abs(parseInt(html.style.top)), // Get the negative offset and make it positive 
        newTop          = offsetTop + negativeOffset + datepicker.outerHeight(); // Calculate new top ( offset top + negative offset (only positive) + outerHeight of input element )
    
    // apply new top position
    $('.datepicker').css({
        top: newTop + 'px',
    });
}

[robertkiraly]

I think I have a similar situation with foundation 6 reveal modals, where modals are using fixed positions (css: position: fixed).

For fixed positioned html elements jquery calculates the offset relative to the screen top and not relative to the document top. As a consequence when you scroll down on the screen and open a modal dialog where you have a date picker, the small offset will result highly positioned datepicker widget.

My workaround is something like this:
if (textbox.parents(".reveal-overlay").length > 0){
this.picker.css("position", "fixed");
}

I know it's very foundation specific, a nicer solution could be to search for parent elements that has fixed positions