Date Picker Orientation/Position

[Mathew]

Reporting the same issue as indicated below.

The new datepicker is positioned above the input box when the viewport has spacing at the top (banner, menu or whatever). When the page is scrolled down and the picker moves to the top of the viewport, it positions the datepicker below the input box. It looks like a calculation issue with regards to the viewport position.

You can see the issue on the demo site.

Inside bootstrap-datepicker.min.js, the orientation is set to “auto“. While “auto” should work in most cases, there will be some cases where it will not work. My work-around is to dequeue and enqueue a modified version of bootstrap-datepicker.min.js with the orientation set to “bottom” using the following.

// -----------------------------------------------------------------------------------
// Register custom bootstrap-datepicker
// custom script resides in child theme directory
// -----------------------------------------------------------------------------------

function dequeue_tribe_bootstrap_Datepicker() {
wp_deregister_script( 'tribe-events-bootstrap-datepicker' );

wp_enqueue_script(
'tribe-events-bootstrap-datepicker',
get_stylesheet_directory_uri() . '/bootstrap-datepicker.min.js'
);

}
add_action( 'wp_enqueue_scripts', 'dequeue_tribe_bootstrap_datepicker', 100 );

I initially tried changing the z-index and that did not have the desired results.

========================
PLEASE LEAVE FOR SUPPORT
Reporting the same issue as: https://theeventscalendar.com/support/forums/topic/z-index-for-date-picker/

[Mathew]

This reply is private.

[Cliff]

Thanks for sharing what worked for you.

I didn’t experience this on our demo site. Would you be able to share an annotated screenshot or screen capture video from our demo site to clarify exactly what’s happening here?

[Cliff]

Oh, great, thanks for that.

I was able to replicate your screenshot, with the “Month” overlap. However, the CSS from that other thread did work for me.

If it’s not working for you, it might need some additional CSS specificity.

Feel free to share the link to where I can see this happening on your site (without your own customizations in place), and I’ll see if I can figure out the full CSS specific to your site.

[Mathew]

This reply is private.

[Cliff]

Thanks for the update. Have a great weekend.

[Author]

Posts