Formidable Forms datepicker displayed at the top of the input field

·

·

Formidable Forms datepicker

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 a former Support Engineer at Saturday Drive Inc. (AKA Ninja Forms) and a GTE for the #bn_BD language. As an active contributor to WordPress, I have contributed to over 60 themes, plugins, and the WordPress core. I also run a small YouTube channel where I share my knowledge.

Leave a Reply

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

More from the blog


Recommended Topics


Popular Tags

formidable forms free stuff gravity forms ninja forms oop open source php top cash back Topcashback wordpress