Ion scroll doesn't work with <div>, <p> or other HTML?

ionic-v1
1

I am trying to re-create something similar to what you see on Facebook and Tumblr with the horizontal scrolling.

My issue is that when I add in HTML, such as wrapping the images with Div or p etc it doesn’t work.

The below markup works fine:

<ion-scroll direction="x" class="wide-as-needed scroll">
      <img style="width: 210px; height: 200px;" src="http://gnuarch.org/wp-content/uploads/2015/02/Ideas-of-studio-apartment-living-room-1024x768.jpg" />
      <img style="width: 210px; height: 200px;" src="http://gnuarch.org/wp-content/uploads/2015/02/Ideas-of-studio-apartment-living-room-1024x768.jpg" />
      <img style="width: 210px; height: 200px;" src="http://gnuarch.org/wp-content/uploads/2015/02/Ideas-of-studio-apartment-living-room-1024x768.jpg" />
  </ion-scroll>

However whe i add in something like the below they stack and it does not work:

 <ion-scroll direction="x" class="wide-as-needed scroll">
      <div class="scrollItemContent">
        <img style="width: 210px; height: 200px;" src="http://gnuarch.org/wp-content/uploads/2015/02/Ideas-of-studio-apartment-living-room-1024x768.jpg" />
        <p>Text and buttons etc here</p>
      </div>

      <div class="scrollItemContent">
          <img style="width: 210px; height: 200px;" src="http://gnuarch.org/wp-content/uploads/2015/02/Ideas-of-studio-apartment-living-room-1024x768.jpg" />
          <p>Text and buttons etc here</p>
      </div>

      <div class="scrollItemContent">
          <img style="width: 210px; height: 200px;" src="http://gnuarch.org/wp-content/uploads/2015/02/Ideas-of-studio-apartment-living-room-1024x768.jpg" />
          <p>Text and buttons etc here</p>
      </div>      
  </ion-scroll>

My CSS:

.wide-as-needed {
  overflow: scroll;
  white-space: nowrap;
}
.scroll {
  min-width: 100%;
}

Need to get the scroll working but with custom HTML

Any help would be great :smile:

Cheers

2

you need to set a fixed height for ion-scroll

3

Cheers,

ion-scroll {
    height: 260px;
    max-height: 260px;
}

Then i added:

.scrollItemContent {
    display: inline-block;
}

Combination of the two got it working,

Thanks for your help