Hi guys,
I have a problem with my code.
I’d like my page content :
- to be scrollable up/down/left/right
- to be zoomed in/out on pinch.
- but the zoom has to be limited to what can be displayed (when going right or bottom there’s plenty of empty spaces…)
- and how can I restrict the max/min zoom level ?
See my short example :
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=0.1, maximum-scale=1, minimum-scale=0.1, width=device-width">
<title>Test</title>
<!--link href="lib/ionic/css/ionic.css" rel="stylesheet"-->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<style>
div {
border : 1px solid #f00;
height : 100px;
float : left;
margin : 10px;
width : 100px;
}
</style>
</head>
<body>
<ion-scroll zooming="true" direction="xy">
<div>Hello World !</div><div>Hello World !</div><div>Hello World !</div><div>Hello World !</div><div>Hello World !</div><div>Hello World !</div><div>Hello World !</div><div>Hello World !</div><div>Hello World !</div><div>Hello World !</div><div>Hello World !</div><div>Hello World !</div>
<br/><br/><br/><br/><br/><br/><br/>Floating divs or whatever HTML content is there
</ion-scroll>
</body>
</html>
The scroll and zoom seems ok, but there’s not limit right/bottom.
Furthermore, when I activate the “lib/ionic/css/ionic.css” I no longer can zoom on pinch.
Regards,
Tiou