-
Posts
-
Hello Enfold Support Team,
I’m using Fluent Forms with the Enfold theme. When I embed a form with a date picker (flatpickr), the year dropdown does not appear when viewing the form on the frontend — even though it works in the form preview.
The date field HTML is correctly rendered with flatpickr-input and ff-el-datepicker classes, but the Flatpickr calendar (including year selector) does not load fully unless I manually reinitialize it via JavaScript after page load. This issue seems related to how Enfold renders content or delays JavaScript execution.
Could this be caused by theme-level JavaScript optimizations, lazy loading, or conflicts that prevent Flatpickr from initializing properly?
Thank you!
Hey minhndq,
Please post a link to where we can see the problem that you are having. If you have a screenshot highlighting what you are looking to fix, then please share that with us as well.
Best regards,
RikardWhen i use fluent form date then not show year like below:
https://img.savvyify.com/image/Screenshot-2025-06-27-163401.y8wQp
After, I use css code:
.flatpickr-current-month {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 2px;
height: 50px;
}/* Dropdown tháng */
/* Giảm độ rộng box tháng */
.flatpickr-monthDropdown-months {
width: 70px; /* Giảm từ mặc định xuống, bạn có thể thử 80px hoặc 90px nếu cần */
font-size: 12px;
height: 32px;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
line-height: 1;
}/* Bọc input năm */
.flatpickr-current-month .numInputWrapper {
width: 70%; /* Đủ để hiển thị 4 chữ số */
height: 50px;
overflow: hidden;
position: static;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}/* Input năm */
.flatpickr-current-month .numInputWrapper input.cur-year {
width: 70%;
height: 100%;
font-size: 14px;
border: none;
text-align: center;
padding: 50;
box-sizing: border-box;
}.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
background: #eee;
border-radius: 4px;
}
But it look like so bad, not show downarrow year
Please help meHi,
Please note that the Fluent Forms month field is a select div with options using this css:#top select { -webkit-appearance: none; border-radius: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC); background-position: center right; background-repeat: no-repeat; border-radius: 2px; }showing a image for the drop down giving you this:
and when you click on it shows the options:
since the year is not a select div with options, but a input with spans you will not see this or the same image.
I wrote this css to override the plugin css:#top .numInputWrapper .arrowUp, #top .numInputWrapper .arrowDown { opacity: 1; display: flex; align-content: center; align-items: center; flex-wrap: wrap; margin-top: -5px; } .numInputWrapper span.arrowUp:after, .numInputWrapper span.arrowDown:after { top: 0; height: 14px; } #top .numInputWrapper .cur-year { margin-bottom: 14px; }
but this is about as close as we can get it, since we can not support third party plugins, if you need more help with this please ask the plugin author to examine. I don’t see any theme css causing this issue.Best regards,
MikeThank you so much, but can you support me about make same date form of enfold theme? Please, because i see it look very beautiful.
- You must be logged in to reply to this topic.