Title: Datepicker positioning issue
Last modified: May 2, 2017

---

# Datepicker positioning issue

 *  [shahn1234](https://wordpress.org/support/users/shahn1234/)
 * (@shahn1234)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/datepicker-positioning-issue/)
 * Hi,
 * I have the DatePicker extension, and it’s having an issue with its programmatically
   determined absolute positioning. It works fine on this test page: [http://mf2.openairwebdesign.com/retreat-form/](http://mf2.openairwebdesign.com/retreat-form/),
   but on a different page, [http://mf2.openairwebdesign.com/family-meditation-retreat-listings/](http://mf2.openairwebdesign.com/family-meditation-retreat-listings/),
   it displays so far above the form that you can’t see it unless you scroll back
   up the page.
 * I wonder if it has anything to do with the fact that the test page displays the
   form only, whereas the second page displays both the form and its results table.
 * Thanks in advance for your help,
    Suzanne

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Author [Roland Barker](https://wordpress.org/support/users/xnau/)
 * (@xnau)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/datepicker-positioning-issue/#post-9087564)
 * I didn’t look at the page, but when using absolute positioning, you need to make
   sure that the enclosing element you plan to position it relative to is “positioned”…
   usually that is accomplished by setting it to position:relative so you end up
   with the absolutely positioned element inside of a relatively positioned element.
   Now, you can set the offsets for your absolute element based on the position 
   of the enclosing element.
 * I hope that makes sense…
 *  Thread Starter [shahn1234](https://wordpress.org/support/users/shahn1234/)
 * (@shahn1234)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/datepicker-positioning-issue/#post-9087811)
 * Yes, I understand absolute positioning. The issue seems to be that the DatePicker
   extension generates a datepicker div that exists outside of the form, just above
   the closing </body> tag. The extension itself generates programmatically the 
   absolute positioning values in a style rule that appears internally within datepicker’s
   html. I don’t know what parent div to set to position:relative (and I tried a
   few as an experiment), as the datepicker’s html is not within the form’s html.
   If the extension is going to use absolute positioning, wouldn’t it add a style
   rule of position:relative to whatever the parent div is?
 * Thanks,
    Suzanne
 *  Plugin Author [Roland Barker](https://wordpress.org/support/users/xnau/)
 * (@xnau)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/datepicker-positioning-issue/#post-9088149)
 * Ok, looking more closely at this, the html and position of the datepicker popup
   is controlled by the jQuery UI Datepicker script. Probably, the script places
   the picker according to the position of the input element it’s attached to, but
   not by placing the HTML in the same element as the input field…it’s positioned
   by calculating the position of the input element.
 * So, there may be something going on on your page that makes the datepicker script
   place it incorrectly…I am not familiar enough with the internal workings of the
   datepicker to know what that might be. My guess would be it’s related to the 
   scrolling setup your have.
 *  Thread Starter [shahn1234](https://wordpress.org/support/users/shahn1234/)
 * (@shahn1234)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/datepicker-positioning-issue/#post-9088302)
 * Thanks for your rapid response! 🙂
 * I will look into this. What’s so odd is that the datepicker placement is just
   fine on the test page I linked to above, but not on the second page, which I 
   believe has the same scrolling setup.
 * Thanks again!
 * Suzanne

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Datepicker positioning issue’ is closed to new replies.

 * ![](https://ps.w.org/participants-database/assets/icon-256x256.jpg?rev=1389807)
 * [Participants Database](https://wordpress.org/plugins/participants-database/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/participants-database/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/participants-database/)
 * [Active Topics](https://wordpress.org/support/plugin/participants-database/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/participants-database/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/participants-database/reviews/)

## Tags

 * [datepicker](https://wordpress.org/support/topic-tag/datepicker/)

 * 4 replies
 * 2 participants
 * Last reply from: [shahn1234](https://wordpress.org/support/users/shahn1234/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/datepicker-positioning-issue/#post-9088302)
 * Status: not resolved