everybody! I'm writing a mobile app for ios using the framework steroids and css/html/js. Unfortunately, I can't understand, why can't I scroll down the view. Please, help.
the html-code of the screen
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<title>Teachers</title>
<link rel="stylesheet" href="/vendor/ionic/css/ionic.css" />
<link rel="stylesheet" href="vendor/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>
</head>
<body>
<div class="grid">
<img src="teachers/bobr.jpg">
<h3>Боброва Даша</h3>
<p>Математический анализ</p>
</div>
<div class="grid">
<img src="teachers/korolev.jpg">
<h3>Королев Даня</h3>
<p>Программирование 1</p>
</div>
<div class="grid">
<img src="teachers/mayb.jpg">
<h3 >Майборода Кирилл</h3>
<p>Программирование 2</p>
</div>
<div class="grid">
<img src="teachers/mosh.jpg">
<h3 >Монгольский фанк</h3>
<p>Ла-ла</p>
</div>
</body>
</html>
and part of css
body {
/* Background color set as workaround for Legacy Android issue:
https://github.com/AppGyver/steroids/issues/381 */
background-color:#fff;
}
.grid{
width: 100%;
height: 33%;
clear: both;
display: inline-block;
}
.grid img{
padding-top: 2%;
padding-bottom: 2%;
margin-left: 3%;
width: 33%;
height:96%;
float: left;
}
.grid h3{
font-size: 300%;
text-align: center;
padding-top: 4%;
}
.grid p{
font-size: 200%;
text-align: center;
}
Should have declared , because this style for the body is declared in the default css file and neccessary for the simulation of the app on android/iphome.