I'm struggling to adapt my ionic list to my data, I've made everything for a good looking app, I still have a very tiny problem, I need your help to figure it out.
Well I want to make ion-scroll full width inside the item list I want to keep the use of position:relative :
Here is my code :
<div class="list">
<div class="item item-divider">
Teams
</div>
<div class="item" ng-repeat="team in teams">
<img ng-src="https://upload.wikimedia.org/wikipedia/en/thumb/4/47/FC_Barcelona_(crest).svg/1010px-FC_Barcelona_(crest).svg.png" style="position:absolute; top:14px; left:10px; width:25px; height:25px" >
<p style="left:50px; position:relative; color:black; font-size:16px; ">{{team.name}}</p> <p style="right:30px; position:absolute; top:16px"> Tout</p>
<i class="icon ion-chevron-right" style="position:absolute; right:10px; color:grey; top:16px"></i>
<ion-scroll direction="x" scrollbar-x="false" style="width: 100%; min-height: 100%; position:relative; top:14px" ng-if="team.news=='true'">
<div style="height:100px; width:520px; position:relative " >
<div style="width:125px; display: inline-block;" ng-repeat="item in items">
<img src="http://fr.starafrica.com/football/wp-content/blogs.dir/2/files/2015/07/sporever/272576_PALERME_LAZAAR_220215-615x340.jpg" style="height:70px; width:120px; padding-right:0px">
<p style="font-size:9px; color:black">News1</p>
</div>
</div>
</ion-scroll>
</div>
and also a codepen DEMO