Modal rendering issues - Githubissues

gdotdesign / elm-ui

UI library for making web applications with Elm

https://elm-ui.netlify.com

BSD 2-Clause "Simplified" License

920 stars 39 forks source link

Modal rendering issues #59

Closed mrozbarry closed 7 years ago

mrozbarry commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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:

screenshot_2017-02-09-10-10-50

gdotdesign commented 7 years ago

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

abhinavzspace commented 7 years ago

Would love this feature 👍

gdotdesign commented 7 years ago

This commit resolves the footer and header issues: https://github.com/gdotdesign/elm-ui/commit/a1e2bb6811dd279afb3a003c533965e002f09de3 It will be released with the next version.

As for the zoom-in and overflow issues:

I suggest optimizing a little for mobile, setting the viewport meta tag so the user cannot zoom, and fixing the layout with media queries.
You can set the min-height CSS property of the ui-modal-wrapper element as I suggested in this issue https://github.com/gdotdesign/elm-ui/issues/58

gdotdesign commented 7 years ago

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