Unable to open time picker from datetime picker in bootstrap modal form

[nicholas-ewing]

I am unable to get the time picker to open from the datetime picker in a modal form (using django-bootstrap-modal-forms). When I click the "Select Time" button I can see the time menu expand downward until it is full size then it disappears. The icon then switches to the calendar icon instead of the clock and nothing else changes. All of the media files are being loaded with the modal, all other functionality appears to work. If I add the "sideBySide" option to the widget I can use both, but I would prefer the default functionality.

1. Open modal form
2. Click calendar icon to open datetime picker
3. Click clock icon at the bottom of the picker to open time select menu
4. Menu expands downward then disappears

I would expect the time select menu to open upward and overlay the date select menu.

Expected behavior from non-modal page:

Encountered behavior with modal page:

• Ubuntu 22.0.2 LTS
• Firefox 111.0.1
• Python 3.10.10
• Django 4.1.7
• Bootstrap 5
• jQuery 3.6.4

Any assistance on this would be great. Thanks!

[monim67]

Thanks for submitting a detailed issue. I'll address it asap.

[monim67]

I cannot reproduce your issue, I have added django-bootstrap-modal-forms integration example in demo pages here. The issue isn't there.

[nicholas-ewing]

Where can I find the source code for the demos? If I could do a side-by-side compare it could help me figure out what I'm missing.

[nicholas-ewing]

Turns out adding the form media in the base.html head breaks the functionality. I discovered it accidentally when I tried using my form.media in the modal page's header as well as the base.html's. I moved the base.html's form.media just above the closing body tag and it works.