Hey!
I have a problem with one of screens of my ionic app. here is the teplate:
<ion-content scroll="false" ng-controller="OptionsCtrl">
<div class="image-thumbnail_options">
<img ng-src="{{data.imageData}}"/>
</div>
<div class="list raleway-medium format-radio_options">
<div>
<p class="primary-color">Select output file format</p>
</div>
<ion-radio ng-repeat="item in outputFormatList"
ng-value="item.value"
ng-model="data.outputFormat">
{{ item.text }}
</ion-radio>
</div>
<div class="buttons-group_options">
<button class="button button-flat" ng-click="show()">
<i class="raleway-bold primary-color icon-left ion-checkmark-circled"> CONTINUE</i>
</button>
<button class="button button-flat" ui-sref="main">
<i class="raleway-bold primary-color icon-left ion-android-cancel"> CANCEL</i>
</button>
</div>
</ion-content>
The problem is, that as the page loads, with the image, it is correctly centered and covers full size, but I can see, that I can horizontally scroll it what results in this:
I have no clue, why it behaves like that so I would really appreciate any help or advice.
From scss:
.image-thumbnail_options {
overflow: hidden;
position: relative;
width: 100%;
height: 33%;
img {
padding: $options_image-padding;
display: block;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}