Styling not responsive
wouter140 opened this issue · comments
I'm opening my modal which looks fine in larger browser windows, but overflows smaller viewports and makes them become unusable as large parts of the modal are outside of the screen and is not scrollable. These modals work properly with the original SweetAlert library
Okay, after viewing the source, it seems there is a different style when using a mobile useragent, so after a refresh, the styling is already much better. However, with a large modal the bottom is still outside of the screen and not scrollable. Possibly this can be fixed by changing the styling to flexbox so it is also responsive?
I made some changes to the styling that use the flexbox system like the original sweetalert library #47. I am however unable to run the project on my machine as it keeps giving warnings when trying to build. So if you have some spare time and would be able to build and test these changes? Or just build and give the file so I can test.
Regards :)
Are you working from the latest in master? I've been pushing a bunch of changes recently.
You'll need to install yarn, typescript, and tslint to build. Use command yarn demo to build and run a demo server locally. This also updates the bundle js file for the live demo.
Hey, I forked the latest from master when I opened this issue. I installed yarn, node, typescript and tslint and am now able to demo and build. However, I get the same issue you have on your own demo site where the console gives an error that d is not a constructor. Which seems to be the Example class which seems fine, so it's kinda weird.
I did manage to build however and use this in my own project to test. I adjusted some more of the styling to be responsive and always stay in the centre of the screen (so it also fixes my other issue). I got most of the changes from the original SweetAlert library. These changes can also be found in my pull request #47.
Normal Alert:
Smaller alert on mobile where the width is slightly restricted, but still with nice padding and no overflow:
Really large alert where the top starts at the top of the browser and is able to scroll so the entire alert is readable:
Thanks for this update.
I'll fix the d not a constructor issue.
@djorg83 Any chance you could push a new release with this in it to npm, please?
Sorry, I have been really short on free time recently. I'll test the latest version now, and if everything is good I'll push a release to npm.
I've published version 5.0.1