Position problem in scrollable modal

[yuduxyz]

When datepicker is placed in a scrollable modal, it doesn't scroll along with other contents. For example, in examples/datepicker-in-modal.html, we set line 30-34 as below:

<div class="modal-body" style="height: 200px; overflow: auto">
    <div style="height: 500px"></div>
    <input type="text" class="form-control" data-toggle="datepicker">
    <div style="height: 500px"></div>
</div>

then, scroll the modal, we can get:

It would be better if datepicker scrolls together with the input box.

[fengyuanchen]

Please scroll the modal container instead of the modal body...

[yuduxyz]

I'm afraid I didn't understand what you mean. Could you please give an example?

[fengyuanchen]

.modal {
  overflow: auto;
}

.modal-body {
  overflow: visible;
}

[yuduxyz]

Hi, fengyuan

Thanks for your reply. I've tried your proposal, unfortunately, it doesn't work either.
I've created a demo here: https://codepen.io/yuduxyz/project/editor/DYyjva#0. Would you please give it a try?

[fengyuanchen]

I know what you mean now.

[ctxcode]

My temp solution is changing the library code so you can have a container without it being inline. You only need to change 2 lines.

I did it in the minified version because i was too lazy to switch.

i.input?e(i.container||t).append(a.addClass("datepicker-inline"))
i.container?e(i.container||t).append(a.addClass("datepicker-inline"))

and

i.removeClass(I).addClass(p).css({top:u,left:d,zIndex:parseInt(t.zIndex,10)})
i.removeClass(I).addClass(p).css(t.container ? {top:50} : {top:u,left:d,zIndex:parseInt(t.zIndex,10)})

Don't forget to put "position: relative" on your container.
Also know that this might break the "inline" functionality.

[tofikabdullayev]

.datepicker-container{ position: fixed; opacity: 0; }

        $('[data-toggle="datepicker"]').on('show.datepicker', function (e) {

          setTimeout(function(){
            $('body').find('.datepicker-container').css({
             'top': $(e.target).offset().top - $(window).scrollTop(), // Don't forget to add margins of target Exp.: +50
             'opacity': 1
            })

          })
        });

Welcome

[kumararunac]

tried but still am facing the issue. Can u plz elaborate

[Nagarajan1605]

Is this issue resolved. What change we have to made it. Is that change to be add in datetimepicker.js or css. Please tell us where to include and what to include.

[mach64ram]

You may try this

/* Check positioning to remain on screen. */
_checkOffset: function( inst, offset, isFixed ) {
var dpWidth = inst.dpDiv.outerWidth(),
dpHeight = inst.dpDiv.outerHeight(),
inputWidth = inst.input ? inst.input.outerWidth() : 0,
inputHeight = inst.input ? inst.input.outerHeight() : 0,
viewWidth = document.documentElement.clientWidth + ( isFixed ? 0 : $( document ).scrollLeft() ),
viewHeight = document.documentElement.clientHeight + ( isFixed ? 0 : $( document ).scrollTop() );

	offset.left -= ( this._get( inst, "isRTL" ) ? ( dpWidth - inputWidth ) : 0 );
	offset.left -= ( isFixed && offset.left === inst.input.offset().left ) ? $( document ).scrollLeft() : 0;
	
	//----- ORGINAL CODE -----//
	//offset.top -= ( isFixed && offset.top === ( inst.input.offset().top + inputHeight ) ) ? $( document ).scrollTop() : 0;
	
	//----- MY SOLUTION -----//
	offset.top -= ( isFixed && ( $(document).scrollTop() > 0 ) ) ? $(document).scrollTop() : 0;
	
	// Now check if datepicker is showing outside window viewport - move to a better place if so.
	offset.left -= Math.min( offset.left, ( offset.left + dpWidth > viewWidth && viewWidth > dpWidth ) ?
		Math.abs( offset.left + dpWidth - viewWidth ) : 0 );
	offset.top -= Math.min( offset.top, ( offset.top + dpHeight > viewHeight && viewHeight > dpHeight ) ?
		Math.abs( dpHeight + inputHeight ) : 0 );
	
	return offset;
}

[LohithaYalavarthi]

Any updates on this?
I am using "antd": "^3.15.2",

[chiragnsuthar]

i m getting same issue on scroll position not changed

[gadasandula]

is this issue resolved can you please tell me the changes