When I use horizontal scroll img can't fixed correctly


Hello guys. I need to horizontal scroll with img but when I add to much img, it doesn’t fixed correctly into screen. Here is the code

<ion-content overflow-scroll="true">
              <div class="statementHeader"> Reading</div>
              <ion-scroll direction="x" zooming="false" delegate-handle="horizontal" horizontal-scroll-fix="mainScroll">
                <div class="row" id="row">
                  <ion-item ng-repeat="readingbook in readingbooks">
                    <img id="profilbookimg" src="{{readingbook.img}}">
              <div class="statementHeader">Will Read</div>
              <ion-scroll direction="x">
                <div class="row" id="row">
                  <ion-item ng-repeat="willreadbook in willreadbooks">
                    <img id="profilbookimg" ng-src="{{willreadbook.img}}">
              <div class="statementHeader"> Read</div>
              <ion-scroll direction="x">
                <div class="row" id="row">
                  <ion-item ng-repeat="readbook in readbooks" >
                   <img id="profilbookimg" ng-src="{{readbook.img}}">

Here is the my css code:

.profil-view #profilbookimg{
	min-width: 100%;
	height: 200px;
	margin-left: 10px;

My problem is books not seing correctly in reading part. When i give a style in row id like width:500%; this time it’s scrolling too much.


Is there anyone who know the solution guys :slight_smile:


Can you share a plunkr/codepen example


Here is the my codeopen example but it doesn’t work correctly. When you put into different number of img into ion item you can see the problem


you have to provide some img data. right now its blank


Now you can see the photos :slight_smile: Unfortunately I didn’t understand why codepen convert the image scrolling form. However when i write same code into ionic it can be scroll the photos.


So you are saying on codepen its working and on ionic its not.

Is this what you need


Ohhh sory for my bad english. I mean codepen don’t convert the scrolling form but ionic does. My problem is (in my first post’s image) when i add to much books’ image into ‘Read’ or ‘Will Read’ or ‘Reading’ part scrolling horizontal is not working correctly until I give a enough width to row tag.


Just curious, If you are scrolling horizontally why do you need rows


I used for codeopen scroll but didn’t work