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

Meet the author

Faisal Ahammad

I’m working as Support Engineer at Saturday Drive Inc (AKA Ninja Forms) and General Translation Editor (GTE) for the #bn_BD 🇧🇩 language. As an active contributor to WordPress and open-source projects, I have translated over 60 themes, plugins, and WordPress core. I also have a small YouTube channel where I share my knowledge.


Leave a Reply

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