Tempus-dominus: widgetParent positions the picker incorrectly

[am0d]

See http://jsfiddle.net/cmpgtuwy/5/

Attaching the picker to a relatively positioned element positions the element incorrectly.

I came across this because I wanted the same behaviour that existed in v3 - the picker is attached to the body element, but positioned under the input element (very useful for dialogs, as it allows the picker to overflow the body of the dialog).

Could we please have some way to get this behaviour back?

[nikoskalogridis]

The whole point of the new positioning algorithm in version 4 is to adapt automatically to the most appropriate relative component, hence not having to deal with positioning on the body element which makes the algorithm much more complicated and fragile (as in version 3, requiring to specify z-index and various other tricks).

Which it does, if you omit the widgetParent option and tweak the widgetPositioning object. Have a look here jsfiddle. I seem to miss your point maybe you could provide a jsfiddle with an actual dialog to demonstrate the problem.

[am0d]

Okay, I've found out how to replicate the issue that I see on my system:

http://jsfiddle.net/cmpgtuwy/7/

It seems that this is caused by setting an overflow property on the modal-body, which prevents the picker widget from overflowing the modal body.

[Garito]

I have the same problem without the modal
First if I don't add the div with class row and the div with class col-xs-12 the calendar don't even show up (would be nice if there were no need of 2 extra divs)

Then I have the same problem @am0d but without the modal
Here's the jsfiddle:
http://jsfiddle.net/9mx6ajaa/

[mauricioac]

Putting an input inside a table, makes the position of the widget completely wrong.

http://jsfiddle.net/wyrzqq5x/1/
(ps: must be http for bootstrap to work)

[patrickracicot]

I have the same issue where if a certain level container has an overflow:hidden, my picker will not be displayed properly.

[ssathishkumar540]

I am also facing this issue. Please look at the followimg fiddle,

http://jsfiddle.net/rtzxsa3e/7/

[nikoskalogridis]

You should follow bootstrap guidelines on properly nesting elements using bootstrap grid system. Otherwise the behavior of positioning the popup will not be the correct one

[luizbim]

Same problem here, someone found a workaround or solution?

Thanks

[Godrules500]

I am having the same problem as well.

[sibsfinx]

Had the same problem with widgetParent and positioning, solved with this commit https://github.com/sibsfinx/bootstrap-datetimepicker/commit/3412d1e910d32bd1c5062926727c2a2ef73a8ce1
Please, test and review it.

[sibsfinx]

I've also added place function to call it when you need to change widget position (for example, on scroll), see this branch https://github.com/sibsfinx/bootstrap-datetimepicker/tree/v4.7.x

[Eonasdan]

@sibsfinx please resubmit your PR to the dev branch

[Kobee1203]

I think we should take into account the margins for vertical positioning 'top' to prevent the picker is too near the input field when the picker appears above.

Here's what I propose:

widget.css({
top: vertical === 'top' ? position.top - widget.outerHeight(true) : position.top + (component || element).outerHeight(true),
left: horizontal === 'left' ? position.left + (component || element).outerWidth() - widget.outerWidth() : position.left
});

We should replace widget.outerHeight() by widget.outerHeight(true)

[jbrooksuk]

This is affecting cachethq/cachet too...

[mauricioac]

The whole point of the new positioning algorithm in version 4 is to adapt automatically to the most appropriate relative component

But now it doesn't work properly....

[jbrooksuk]

Yeah, it definitely isn't working as planned...

[maxnowack]

+1

[simonoff]

Save issue as for @jbrooksuk

[ghost]

yeah, jquery dialog, major headache.

[cfigueiredo]

How can i append the widget to the body to solve the issue of opening the DTP in a Bootstrap modal?

[germanger]

Any news on this? I'm seeing the widget on top of the page.
The input field is inside a handlebar template

[liamdavies]

+1, seeing the same behaviour as @jbrooksuk

[lllopo]

Same problem here - "overflow: hidden" cuts the picker. Definitely has to be attached to the body. Major show-stopper.

[naveenraina]

I agree with @lllopo. This is major show-stopper as we definitely need to use this control in scenarios like table and modal dialog.

[KpjComp]

Had same problem,..

Again not with Dialogs, but a table inside collapsible containers.

Setting WidgetParent to 'body' and applying @sibsfinx fix worked for me.

[sripad]

+1

When we have the datepicker widget within a scroll container overflow-y: scroll; the widget isn't shown completely, it is getting cut-off. I expect it to show outside the parent scroll container when it cannot be shown within the parent scroll container. https://jsfiddle.net/sripad6e/0Ltv25o8/1680/

https://jsfiddle.net/sripad6e/0Ltv25o8/1679/

Setting WidgetParent to 'body' and applying @sibsfinx fix did not worked for me.

[naveenraina]

I had to move to another library which is based on this library but has no such issues with overflow-y. Check this out -
https://github.com/smalot/bootstrap-datetimepicker#~2.3.4

You will have to add support for moment on your own though if you want to handle time as a moment object.

[robregonm]

Any news?

[marshnmedia]

+1 for a solution to the problem of datepicker within scroll container

My current solution... Not perfect, but for now this works ok for my purposes. (Not cross browser tested)

$('.datetimepicker').datetimepicker({widgetParent:'body'})
.on('dp.show', function(){
var top = ($(this).offset().top-300);
var left = $(this).offset().left;
if($(this).offset().top - 400 <= 0) { //display below if not enough room above
top = $(this).offset().top+$(this).height()+10;
}
$('.bootstrap-datetimepicker-widget').css(
{
'top':top+'px',
'left':left+'px',
'bottom':'auto',
'right':'auto'
});
});

[robregonm]

My hack is pretty similar:

$('.datetimepicker').on('dp.show', function () { // Hack datepicker position
    var datepicker = $(this).siblings('.bootstrap-datetimepicker-widget');
    if (datepicker.hasClass('top')) {
        var top = $(this).offset().top - datepicker.height() - 180;
        datepicker.css({'top': top + 'px', 'bottom': 'auto'});
    }
});

[simondubois]

Quick and dirty fix that worked for me :

        target.parent().css('position', 'relative');
        target.datetimepicker();

[JamieMcDonnell]

Hi all,
thanks for the info so far - I was trying to implement robregonm's hack in a bootstrap modal with multiple datepickers in it but
var datepicker = $(this).siblings('.bootstrap-datetimepicker-widget');
did not return the datepicker - the context is correct but it seems that by the time this is called the datepicker is no longer a sibling of the input element.

I moved to this which seems to work well for me using bottom alignment - hope it helps someone else ;)-:

$('.datetimepicker')
.on('dp.show', function(){
                var datepicker = $("body").find('.bootstrap-datetimepicker-widget:last');
                if (datepicker.hasClass('bottom')) {
                    var top = $this.offset().top + $this.outerHeight();
                    var left = $this.offset().left;
                    datepicker.css({
                                    'top': top + 'px', 
                                    'bottom': 'auto',
                                    'left': left+'px'
                                });
                }
            });

[roooodcastro]

I'm having the same issue of wrong positioning when the input is placed inside a table cell. The datepicker shows at the very bottom left of the page.

I tried @simondubois's suggestion and it worked:

var dateInput = $("#datetimepicker");
// Parent here will be the <td>
dateInput.parent().css("position", "relative");
dateInput.datetimepicker();

[miguelcobain]

Combining the absolute position fixes here:

    target.on('dp.show', function() {
      var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last');
      if (datepicker.hasClass('bottom')) {
        var top = $(this).offset().top + $(this).outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      } else if (datepicker.hasClass('top')) {
        var top = $(this).offset().top - datepicker.outerHeight();
        var left = $(this).offset().left;
        datepicker.css({
          'top': top + 'px',
          'bottom': 'auto',
          'left': left + 'px'
        });
      }
    });

works for bottom and top scenarios, widgetParent: 'body' and position:relative on <body>.
I really wished this worked out of the box.

Is there any way to easily override the place function?

[githubjeka]

@simondubois :+1:
https://github.com/Eonasdan/bootstrap-datetimepicker/issues/790#issuecomment-138078454

[miguelcobain]

@githubjeka You had success using that fix with widgetParent: 'body', while inside an overflow: hidden div?

[githubjeka]

No

[amalagaura]

@roooodcastro That is a nice fix, it fixes the issue I had with the picker in a modal being out of place.

[wagnerlduarte]

Hello,

The solution for me was the following:
http://jsfiddle.net/cmpgtuwy/151/

In the class that has the "overflow: hidden", I put the following code:

.modal-body {
     overflow-x: visible! important;
}

.modal-body: after {
         content: "";
         clear: both;
         display: table;
 }

In the case of the was @am0d .modal-body class, but can be used in another that involving the datepicker.

[bianchimro]

@roooodcastro solution works for me too

[afanasy]

Had the same issue, @roooodcastro (@simondubois) suggestion worked for me

[Paulmicha]

@miguelcobain 's solution worked for situations where the datepicker is inside a scrollable element (or overflow hidden) : http://jsfiddle.net/cmpgtuwy/171/

[vipulasri]

@Paulmicha solution worked for me! Thanks

[dharmeshmistry]

@Paulmicha Solution worked for me. Thanks!!
Used datetimepicker in panel-group accordion component.

[mts88]

For me worked put {position:relative;} on the parent container of the input.

[epimeth]

For those of you pining for the old days of being attached to body!
I hate it but it works....

.on('dp.show', function (e) {
    var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last'),
        position = datepicker.offset(),
        parent = datepicker.parent(),
        parentPos = parent.offset(),
        width = datepicker.width(),
        parentWid = parent.width();

    // move datepicker to the exact same place it was but attached to body
    datepicker.appendTo('body');
    datepicker.css({
        position: 'absolute',
        top: position.top,
        bottom: 'auto',
        left: position.left,
        right: 'auto'
    });

    // if datepicker is wider than the thing it is attached to then move it so the centers line up
    if (parentPos.left + parentWid < position.left + width) {
        var newLeft = parentPos.left;
        newLeft += parentWid / 2;
        newLeft -= width / 2;
        datepicker.css({left: newLeft});
    }
})

I also had to add code to force the immediate parent to have position: relative. In my case this works across the board. But keep in mind that in your case, datepicker.parent() isn't necessarily the correct element to use as parent. Use at your own risk. Modify at your own will :-)

[palmtown]

Hello,

I am having the same issue, any fix for this as of yet?

[afanasy]

@palmtown

target.parent().css('position', 'relative');
target.datetimepicker();

[palmtown]

@afanasy

Thanks for the prompt response, that worked like a charm! :)

[epimeth]

I neglected to zIndex: 9999 //or some other large number as needed in my solution above

[AndreaBB]

I soved doing:
<div style="position:relative"><input type='text' class="form-control" id='datetimepicker4' /></div>

[vmitchell85]

+1

[fredericoregateiro]

the @sibsfinx fix never get to be merged, any reason?

[fredericoregateiro]

Hello,
Can anyone help me with a integration problem?
i've created a fiddle with my code so far.
My problem is the datetime picker gets cut by the table.

Thanks

[epimeth]

@fredericoregateiro this is exactly the issue we are all talking about here and have offered many different solutions to. The most "correct" solution for your needs depends on many different factors as well as what you may or may not be willing to implement.

The immediate solution that comes to mind requires overriding jsgrid's styles, which to me is anathema unless absolutely necessary...
https://jsfiddle.net/8hLbskq3/

otherwise you can try various widgetParent solutions (specifically, body in this case) as per https://jsfiddle.net/1de9tuqm/

[fredericoregateiro]

@epimeth thanks, i just took a quick look and its seems working fine

[renathy]

If I use overflow: visible (it is a common fix of this problem) then scrollbar disappears. But my table has scrollbars and I need bootstrap datepicker to appear over it. Any suggestions here?

[owq]

Been using one of the widgetParent solutions. Note that on resize event the widget position is recalculated so adjusting at dp.show event is not sufficient. For example, on Android 7 tablet if the field gets focus and keyboard appears, the widget will be placed at wrong position. So you'll have to adjust the position at private place() event or add a listener to resize event.

[avanipatel283]

Try this solution, it is working for me

                     var datepicker = sandbox.dom('body').find('.bootstrap-datetimepicker-widget:last'),
                position = datepicker.offset();

            // Move datepicker to the exact same place it was but attached to body
            datepicker.appendTo('body');
            datepicker.css({
                position: 'absolute',
                top: position.top,
                bottom: 'auto',
                left: position.left,
                right: 'auto'
            });

[AdnanBoota]

@Paulmicha solution worked for me as well 👍

[ffabing]

Setting parent position to relative works for me inside table
Thanks to @simondubois !

[eonasdan-bot]

Hello. Thanks for using my project. We’re closing all tickets/prs for v4 as it is no longer supported. We’re making way for a new version. Please read this blog post