{"id":1360731,"date":"2017-10-07T09:23:57","date_gmt":"2017-10-07T16:23:57","guid":{"rendered":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/"},"modified":"2017-10-07T09:23:57","modified_gmt":"2017-10-07T16:23:57","slug":"date-picker-orientationposition","status":"closed","type":"topic","link":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/","title":{"rendered":"Date Picker Orientation\/Position"},"content":{"rendered":"

Reporting the same issue as indicated below.<\/p>\n

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.<\/p>\n

You can see the issue on the demo<\/a> site.<\/p>\n

Inside bootstrap-datepicker.min.js, the orientation is set to “auto<\/strong>“. 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<\/strong>” using the following.<\/p>\n

<\/p>\n

\/\/ -----------------------------------------------------------------------------------
\n\/\/ Register custom bootstrap-datepicker
\n\/\/ custom script resides in child theme directory
\n\/\/ -----------------------------------------------------------------------------------<\/p>\n

function dequeue_tribe_bootstrap_Datepicker() {
\n\twp_deregister_script( 'tribe-events-bootstrap-datepicker' );<\/p>\n

\twp_enqueue_script(
\n 'tribe-events-bootstrap-datepicker',
\n get_stylesheet_directory_uri() . '\/bootstrap-datepicker.min.js'
\n );<\/p>\n

}
\nadd_action( 'wp_enqueue_scripts', 'dequeue_tribe_bootstrap_datepicker', 100 );<\/p>\n

<\/code><\/p>\n

I initially tried changing the z-index and that did not have the desired results.<\/p>\n

========================
\nPLEASE LEAVE FOR SUPPORT
\nReporting the same issue as:\u00a0https:\/\/theeventscalendar.com\/support\/forums\/topic\/z-index-for-date-picker\/<\/p>\n","protected":false},"template":"","class_list":["post-1360731","topic","type-topic","status-closed","hentry"],"yoast_head":"\nDate Picker Orientation\/Position -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Date Picker Orientation\/Position -\" \/>\n<meta property=\"og:description\" content=\"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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/\",\"url\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/\",\"name\":\"Date Picker Orientation\/Position -\",\"isPartOf\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\"},\"datePublished\":\"2017-10-07T16:23:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/theeventscalendar.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"https:\/\/theeventscalendar.com\/support\/topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Calendar Products\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Events Calendar PRO\",\"item\":\"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Date Picker Orientation\/Position\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/theeventscalendar.com\/support\/#website\",\"url\":\"https:\/\/theeventscalendar.com\/support\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Date Picker Orientation\/Position -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/","og_locale":"en_US","og_type":"article","og_title":"Date Picker Orientation\/Position -","og_description":"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 […]","og_url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/","url":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/","name":"Date Picker Orientation\/Position -","isPartOf":{"@id":"https:\/\/theeventscalendar.com\/support\/#website"},"datePublished":"2017-10-07T16:23:57+00:00","breadcrumb":{"@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/theeventscalendar.com\/support\/forums\/topic\/date-picker-orientationposition\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/theeventscalendar.com\/support\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"https:\/\/theeventscalendar.com\/support\/topics\/"},{"@type":"ListItem","position":3,"name":"Calendar Products","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/"},{"@type":"ListItem","position":4,"name":"Events Calendar PRO","item":"https:\/\/theeventscalendar.com\/support\/forums\/forum\/events\/events-calendar-pro\/"},{"@type":"ListItem","position":5,"name":"Date Picker Orientation\/Position"}]},{"@type":"WebSite","@id":"https:\/\/theeventscalendar.com\/support\/#website","url":"https:\/\/theeventscalendar.com\/support\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/theeventscalendar.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1360731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/topic\/1360731\/revisions"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/support\/wp-json\/wp\/v2\/media?parent=1360731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}