Formidable Forms datepicker displayed at the top of the input field

·

·

By default, the datepicker is displayed at the bottom of the date input field. There is no control, like jQuery UI Datepicker, to change its position. The following inline CSS is used for the ui-datepicker-div ID to display the datepicker pop-up at the bottom.

position: absolute;
top: 919.25px;
left: 104px;
z-index: 1;
display: block;
Formidable Forms datepicker

However, if you change the CSS position top to unset and bottom to -165px, it will be displayed at the top of the date field. Alternatively, you can add a -275px top margin, so it will work fine. Here is the final code and output.

/* Adjust the margin value to match with your website */
#ui-datepicker-div.ui-datepicker {
  margin-top: -275px !important;
}

/* Alternative code */
#ui-datepicker-div.ui-datepicker {
  bottom: -165px !important;
  top: unset !important;
}
Formidable Forms datepicker

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.