Dynamic position of popup calendar

I am trying to create a popup calendar, and I am using the classes from Fomantic (https://fomantic-ui.com/modules/calendar.html#calendar) and have created a DatePicker module based on elm-datepicker (https://github.com/elm-community/elm-datepicker/blob/master/src/DatePicker.elm). Since I can’t use the Fomantic Javascript, the popup is stuck above the field, which sometimes becomes an issue if the field is in the bottom of a dialog. How can I detect if the popup will be partly outside of the parent element, and then change the class so that it goes above the field instead?

I don’t have the full solution for you, just thinking out loud:

If you go full-Elm route, you’ll have to track the state (position wrt. viewport) in your Model.

If you don’t need to publish an Elm package but need this just for your app, a WebComponent that tracks this in JS might be a simpler solution, and cleaner from the Elm integration side too.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.