# Dynamic position of popup calendar

**URL:** <https://discourse.elm-lang.org/t/dynamic-position-of-popup-calendar/5184>\
**Category:** Learn\
**Created:** [February 15, 2020, 11:25am UTC](https://discourse.elm-lang.org/t/dynamic-position-of-popup-calendar/5184 "2020-02-15T11:25:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![teatimes](https://avatars.discourse-cdn.com/v4/letter/t/e36b37/32.png) [@teatimes](https://discourse.elm-lang.org/u/teatimes)\
**Post date:** [February 15, 2020, 11:25am UTC](https://discourse.elm-lang.org/t/dynamic-position-of-popup-calendar/5184/1 "2020-02-15T11:25:46Z")

</div>

I am trying to create a popup calendar, and I am using the classes from Fomantic ([https://fomantic-ui.com/modules/calendar.html#calendar](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](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?

---

<div class="post-metadata">

**Author:** ![Janiczek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/janiczek/32/4516_2.png) [@Janiczek](https://discourse.elm-lang.org/u/Janiczek)\
**Post date:** [February 15, 2020, 12:01pm UTC](https://discourse.elm-lang.org/t/dynamic-position-of-popup-calendar/5184/2 "2020-02-15T12:01:48Z")

</div>

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](https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#getViewport)) 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.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [February 25, 2020, 12:01pm UTC](https://discourse.elm-lang.org/t/dynamic-position-of-popup-calendar/5184/3 "2020-02-25T12:01:53Z")

</div>

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