Datepicker not visible

[AdrieDonker]

I'm trying to use it with Rails 5, Ruby 2.3.1 and Bootstrap 4. The html is loaded, but the picker is not visible. When I exclude position: absolute from class: picker__holder, then the picker is visible but in the wrong position (of course).

[engelby]

In my case, when the picker wouldn't display it was because the $root element for the picker was inside another element that had been styled with 'overflow: hidden'.

The solution I came up with was to the move the $root node(s) inside a div that was first in the DOM with this styling:

#overlayDiv {
  position: absolute;
  width: 100%;
  min-width: 167px;
  max-width: 466px;
  box-sizing: border-box;
}

These properties are copied from the picker__holder class in classic.css. Then for each picker I added this code when the open event fired:

onOpen: function() {
    var elm  = this.$node.get(0);
    var bound = elm.getBoundingClientRect();
    var sTop  = $(document).scrollTop();
    var left  = bound.left;
    var top   = bound.top + bound.height + sTop;
    $('div#overlayCont').css('left', left);
    $('div#overlayCont').css('top' , top);
    this.open();
}

This code has the effect of moving the overlayDiv right underneath the input control for the picker. With nearly 200 date pickers on my page, the only time performance was sorta slow was moving around the $root nodes.

[RenateM]

Has a fix for this been released yet? Finding it hard to implement the above suggested solution.

[engelby]

The solution I came up with is a dirty hack at best. The documentation explicitly mentions this could mess up keyboard event propagation if not close to the input element. Here is a fiddle to play with and see the concept even though it's pretty janky.

If I feel really ambitious, I'll see if I can figure out how to make it generic enough to submit a patch.

[RenateM]

Thanks! I found some legacy code in my project that was causing the datepicker to land in the overflow. It was styling that had been put there for a previous version of the datepicker. After removing that, the datepicker was visible again.