Tempus-dominus: Popup being cut off by parent elements

[Nicks182]

I have a VERY complex screen with a massive grid of data and some scrolling features which requires me to use overflow:hidden on some of the elements. As such the popup from the date picker is being cut off or it could be the fact that it's inside a table element that it's being cut off.

The old JQuery picker is what I was using before and that was fine, but now I need to know how to get this control's popup to be above everything else. I've been trying some css changes, but so far nothing has made any change.

If I can't get this to work, I will be forced to work many hours over time to implement another new datepicker across the entire project as we date pickers in quite a few locations. Please help.

[alexweissman]

I had this problem with modal windows. It turns out that Bootstrap's modal element cuts off any overflow by default. It is possible that your table is doing the same thing. For me, I created a custom class modal-allow-overflow:

.modal-open .modal.modal-allow-overflow {
    overflow: visible;
}

And then applied this class to any modal in which I needed a datetimepicker:

<div class='modal fade modal-allow-overflow' data-width="760">
...
</div>

[Nicks182]

Unfortunately I can't change the overflow property of the tables like that or we'll have tons of other html being visible when it shouldn't be.

The HTML for this popup is being created just below the input field in the same HTML hierarchy level which means any parent element will mess with it when overflow settings are set to hidden. JQuery creates the HTML for their popup at the end of the page in the body tag which means the popup is by default not effected by any overflow settings anywhere within your page. This is also true for bootstrap modals. The popup is outside of the html that makes up the meat of your page which is what you want most of the time... or at least is what we want.

I would prefer not to change how the datepicker works as that will mean that if we ever used a updated version that the changes I make can be overwritten, but I will take a look at what needs to be changed to get the popup for this datepicker to be created below and outside of the main part of the page so it will not be effected by parent elements with overflow settings.

[alexweissman]

Ahh, so this is a DOM paradigm that I wasn't aware of.

Can you try playing with this option and see if it works? Maybe you can set the widgetParent to body.

[Nicks182]

Changing the widgetParent to body kinda worked, but the position was then all wrong and the popup would show in the top left corner.

I then created a little function that is run on the onclick event of the input field to try and avoid changing any of the plugin's code. I get the offset of the input control and updated the popup's position with the top and left values I got from the offset. Note you have to add about 25px to the top property to have the popup below the input field. Don't know if this is the right way to do it...

I will probably also need to expand the function to try and adjust the positioning if the popup were to go past the screen edge. So if the popup is being cut off by the right side of the screen, I have to adjust the left position to bring it back into the screen and the same with if it gets cut off by the bottom of the screen.

Will need to do some testing and see if this will solve my problem or possibly create new issues, but looks good so far. Not sure if I like having a separate function to "fix" the popup sort of after the fact, but if I don't find any other issues I don't have to spend many hours of my own time implementing a brand new plugin and instead work on a new plugin after the deadline.

Thanks alex.

[Nicks182]

Had a meeting and it was decided to rather make the date picker a modal type popup to make it more mobile friendly.

All I had to do was change the picker to be inline and then put it on a little basic bootstrap modal with a custom dp.change handler that will automatically close the modal once a date has been clicked.

Inline example: http://eonasdan.github.io/bootstrap-datetimepicker/#inline

Thought I'd post this as I think it's actually a pretty nice and simple way to get around the issue of the popup being cut off.

[tontonsb]

This thread is obviously old, but some people might stumble around solving the same problem as I did today.

I found a solution that worked for me. The key is that the datetimepicker will position itself absoulutely and with respect to closest positioned (relative/absolute/fixed) ancestor.

What worked for me was to set position: static for parent end every ancestor up the DOM tree until I got to an ancestor that was not inside the scrollable part.

A side effect is that the datepicker doesn't scroll as you scroll inside the container, but it seems good for me.

TLDR: Set position: relative where you have overflow: auto/ overflow: scroll. And set position: static to everything inside. At least the direct ancestors of widget.

[itajackass]

I use this when I've a datetimepicker inside a small modal:

for the page:

body {position:relative;} //<---IMPORTANT
.bootstrap-datetimepicker-widget {z-index: 9999 !important;}

script:

$('#start').datetimepicker({
        locale: 'it',
        format: "DD/MM/YYYY",
        widgetParent: 'body'      //<-----IMPORTANT
    });

    $('#start').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'
        });
      }
    });

[ikunyemingor]

Many thanks @itajackass your fix worked really well