Modal rendering issues

[mrozbarry]

So I have two issues,

First, if I pass a "" to title or a [] to footer, then those pieces shouldn't render. There are definitely reasonable use-cases to not have a title or footer.

Second, I'm having a small handful of mobile issues. For context, I'm embedding a calendar into a modal.

• If I'm zoomed in, the modal can be off-screen or off-center. I don't know if that's easily fixable, or not.
• If I'm in landscape, my calendar overflows the modal. Is it possible to set a min-height on the modal and allowing the page to scroll?

Otherwise, this library is great, so thanks for taking the time to develop it.

[gdotdesign]

First, if I pass a "" to title or a [] to footer, then those pieces shouldn't render. There are definitely reasonable use-cases to not have a title or footer.

This I agree with but I have one issue with this and that is the close icon, since it's part of the header, what would be the expected behavior of it if there is no title displayed? should it be hidden as well?

Second, I'm having a small handful of mobile issues. For context, I'm embedding a calendar into a modal.

Can you provide some screen-shots for these? It would help me see what the problem is, thank you.

[mrozbarry]

To address the first point, I think it's fine if there is no close button. If the developer intentionally removes the title, then it's probably their responsibility to wire up a button. That, coupled with the backdrop being clickable to close the modal, it's probably fine. For my use case, when the user picks a day on the calendar, the modal automatically closes - I've already wired that up, and it does the right thing.

Here is a screenshot from my android/samsung galaxy prime:

[gdotdesign]

Thanks, I'll try to fix this soon. I let you know when it's ready.

[abhinavzspace]

Would love this feature 👍

[gdotdesign]

This commit resolves the footer and header issues: a1e2bb6 It will be released with the next version.

As for the zoom-in and overflow issues:

1. I suggest optimizing a little for mobile, setting the viewport meta tag so the user cannot zoom, and fixing the layout with media queries.
2. You can set the min-height CSS property of the ui-modal-wrapper element as I suggested in this issue Allow multiple modal widths #58

[gdotdesign]

Released in https://github.com/gdotdesign/elm-ui/releases/tag/1.1.0