Why is ion-content using the scroll css class when this class is not set on it in HTML?

Question

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.

Jess Patton Jess Patton · Accepted Answer · 2015-08-07T16:52:02

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.

Why is ion-content using the scroll css class when this class is not set on it in HTML?

1 Answers