I am creating a program(a 2 dimension grid of rows/cols) using ionic and Angular. Inside the HTML, I have not specified any class to ion-content element. Inside the CSS there is scroll class which is automatically getting applied on the ion-content element. Why is this happening?
<ion-content>
<div class="row " ng-repeat="i in getNumber(6) track by $index">
<div class="col" ng-repeat="i in getNumber(6) track by $index">
</div>
</div>
</ion-content>
.col{
background-color:gray !important;
border:thin solid black;
text-align:center !important;
}
.scroll{
height: 100% !important;
background:red;
display: -webkit-box !important;
display: -moz-box !important;
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;
-webkit-box-direction: normal !important;
-moz-box-direction: normal !important;
-webkit-box-orient: vertical !important;
-moz-box-orient: vertical !important;
-webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
.row{
-webkit-box-flex: 0 !important;
-moz-box-flex: 0 !important;
-webkit-flex: 0 1 50% !important;
-ms-flex: 0 1 50% !important;
flex: 0 1 50% !important;
}
getNumber(n) is scope function defined in the javascript file which returns an array of n elements. Using the above code, I am trying to create a 2D grid of rows and Cols.
Because ion-content is built with a scroll view. this is straight from the ionic.js file.
On both Android and iOS, Ionic will attempt to prevent the keyboard from
* obscuring inputs and focusable elements when it appears by scrolling them
* into view. In order for this to work, any focusable elements must be within
* a [Scroll View](http://ionicframework.com/docs/api/directive/ionScroll/)
* or a directive such as [Content](http://ionicframework.com/docs/api/directive/ionContent/)
* that has a Scroll View.