I’m currently working on the same problem: a map that’s too big for smartphone screens and that needs to be scrollable (and pinch-zoomable, but that’s a battle for another day).
It is quite amusing. If you wrap the map in an
<ion-content>, you can scroll vertically, but not horizontally.
If you wrap it in an
<ion-scroll>, you can do the opposite (horizontally but not vertically). After the initial laugh, I realized where I would need to dig deeper.
I looked at the directives in
ionic-angular.js and noticed that they load different css classes:
After some fiddling (or rather ‘plunkering’), I got it to work.
Take your Plunker (as it is!) and add
style=“margin-top:125px;position:fixed;display:inline;top:0;right:0;bottom:0;left:0;” to your
<ion-scroll> - et voilà! You can now scroll up/down, right/left and diagonally; if you go too far, it bounces back; both scrollbars included.
- First, I just added
display: inline;, which kinda works. You can now scroll, but far beyond the image’s edges, without scrollbars and if you scroll down you overlap your other elements.
- Next, I added
style=“position:fixed;top:0;right:0;bottom:0;left:0;” which gives you scrollbars and the bouncing, but since it’s now in a fixed position, you’re still faced with the overlap problem.
- The solution to this problem depends on your page. In the plunker I just added
style=“margin-top:125px;”. Cheap, but gets the job done .
Maybe you could just expand your
ionScroll directive and load a different css class if the user sets
I hope that helps!