Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Small screen will make the modal go down #174

Closed
virtapoika opened this issue Sep 1, 2016 · 4 comments
Closed

Small screen will make the modal go down #174

virtapoika opened this issue Sep 1, 2016 · 4 comments

Comments

@virtapoika
Copy link

Using a small screen appears to make weird popping of the modal to a lot lower so that you need to scroll... Interesting...

@GiancarloJSantos
Copy link

Yep. It happens in my app also. Any sugestions? Is there a workaround?

@kylefox
Copy link
Owner

kylefox commented Sep 5, 2016

I wonder if it's related to the max-width: 400px; default CSS. It appears to be "popping" when the viewport is narrow than this width.

Is that approximately what you're noticing @virtapoika & @GiancarloJSantos ?

Maybe try experimenting with the width style, and even try changing it to a max-width instead. TBH the hard-coded width is kind of a pain, and something I'd like to get ride of in jQuery Modal 2.0

@montyvesselinov
Copy link

replacing width: 400px with width: 90% in default CSS fixes the problem; very annoying

@kylefox
Copy link
Owner

kylefox commented Sep 11, 2016

Ok, I've fixed this in v0.8.0. You can try the examples at jquerymodal.com.

In summary, the default styles for .modal have been changed:

  • Use width: 90%; rather than a hard-coded pixel value
  • Use max-width: 500px; to prevent extremely wide content (can easily be overridden or removed with max-width: none;
  • Use box-sizing: border-box; so that calculated width is never larger than the viewport (which caused the modal to "pop" to the bottom of the page at narrow screen sizes).

@kylefox kylefox closed this as completed Sep 11, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants