When I use horizontal scroll img can't fixed correctly

ionic-v1
1

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}}">
                  </ion-item>
                </div>
              </ion-scroll>
              <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}}">
                  </ion-item>
                </div>
              </ion-scroll>
              <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}}">
                 </ion-item>
               </div>
             </ion-scroll>
</ion-content>

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.
image

2

Is there anyone who know the solution guys :slight_smile:

3

Can you share a plunkr/codepen example

4

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

5

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

6

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.
http://codepen.io/Serhattan/pen/RVpdoN?editors=1000

7

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

Is this what you need

8

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.

9

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

10

I used for codeopen scroll but didn’t work