fix(datepicker): fix Flatpickr 1px calendar width on hidden date pickers#1263
Merged
JohnVillalovos merged 1 commit intodevelopfrom Apr 4, 2026
Merged
fix(datepicker): fix Flatpickr 1px calendar width on hidden date pickers#1263JohnVillalovos merged 1 commit intodevelopfrom
JohnVillalovos merged 1 commit intodevelopfrom
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes Flatpickr rendering for the “Repeat On” date picker when it’s initialized inside a Bootstrap d-none container (hidden at load), which previously caused the calendar to render with incorrect dimensions.
Changes:
- Added a deferred Flatpickr initialization path when a date control has a hidden (
.d-none) ancestor. - Implemented a
MutationObserverto wait for thed-noneclass to be removed before callinginit().
JohnVillalovos
force-pushed
the
jlvillal/issue_1230
branch
from
150e59d to
75944a9
Compare
JohnVillalovos
force-pushed
the
jlvillal/issue_1230
branch
from
75944a9 to
c4c45da
Compare
JohnVillalovos
force-pushed
the
jlvillal/issue_1230
branch
from
c4c45da to
5bd6a84
Compare
JohnVillalovos
force-pushed
the
jlvillal/issue_1230
branch
2 times, most recently
from
6fd8e54 to
2e75c26
Compare
JohnVillalovos
force-pushed
the
jlvillal/issue_1230
branch
from
2e75c26 to
acf133c
Compare
JohnVillalovos
changed the title
JohnVillalovos
force-pushed
the
jlvillal/issue_1230
branch
from
acf133c to
a26c3b0
Compare
JohnVillalovos
changed the title
JohnVillalovos
force-pushed
the
jlvillal/issue_1230
branch
from
a26c3b0 to
699c2c4
Compare
JohnVillalovos
force-pushed
the
jlvillal/issue_1230
branch
from
699c2c4 to
fe1d91f
Compare
Flatpickr's internal setCalendarWidth() measures offsetWidth during
initialization. When a date picker lives inside a hidden ancestor
(d-none, closed Bootstrap collapse, or unopened modal), offsetWidth
returns 0, producing a 1px-wide calendar that renders as an empty
scrollbar.
Initialize Flatpickr eagerly so _flatpickr is always available to
consumers, then recalculate the calendar width once all hidden ancestors
become visible. Visibility is detected via MutationObserver for d-none
class removal, shown.bs.collapse, and shown.bs.modal events. Nested
hidden ancestors are handled recursively.
The width recalculation uses Flatpickr's public set() API:
fp.set('showMonths', fp.config.showMonths) triggers the internal
setCalendarWidth() callback, which re-measures offsetWidth at a point
where the element has its correct layout dimensions.
Closes: #1230
JohnVillalovos
force-pushed
the
jlvillal/issue_1230
branch
from
fe1d91f to
f0b8e92
Compare
labmecanicatec
approved these changes
Apr 4, 2026
Collaborator
labmecanicatec
left a comment
labmecanicatec
left a comment
There was a problem hiding this comment.
It works correctly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Flatpickr's internal setCalendarWidth() measures offsetWidth during
initialization. When a date picker lives inside a hidden ancestor
(d-none, closed Bootstrap collapse, or unopened modal), offsetWidth
returns 0, producing a 1px-wide calendar that renders as an empty
scrollbar.
Initialize Flatpickr eagerly so _flatpickr is always available to
consumers, then recalculate the calendar width once all hidden ancestors
become visible. Visibility is detected via MutationObserver for d-none
class removal, shown.bs.collapse, and shown.bs.modal events. Nested
hidden ancestors are handled recursively.
The width recalculation uses Flatpickr's public set() API:
fp.set('showMonths', fp.config.showMonths) triggers the internal
setCalendarWidth() callback, which re-measures offsetWidth at a point
where the element has its correct layout dimensions.
Closes: #1230