Question

I have a horizontal scroll that I'm building but the divs end up wrapping to the next line instead of going off screen. In essence I'm trying to create this.

http://codepen.io/calendee/pen/HIuft?editors=100

My CSS looks like

.wide-as-needed {
  white-space: nowrap;
  overflow: scroll;
}

.scroll {
  min-width: 100%;
}

parts * {
  width: 100px;
}

parts {
  display: inline;
  float: left;
  margin-right: 20px;
}

My HTML looks like

<ion-scroll class="wide-as-needed" direction="x">
    <parts ng-repeat="part in popularParts" part="part"</parts>
</ion-scroll>

The parts element sample here

<parts ng-repeat="part in popularParts" part="part" class="">
    <div class="text-center">
        <img src="image.png">
        <div class="bold assertive ng-binding">Product 1</div>
        <div class="assertive ng-binding">John Deere</div>
        <div class="bold balanced ng-binding">$88.0</div>
    </div>
</parts>

What's wrong and how do I fix this?

Answer 1

Does it have to use Ionic? Here is an example with CSS and HTML, not using Ionic. http://codepen.io/tylerism/pen/zGPQaj .item{ display: inline-block; vertical-align: middle; background:#333388; color:white; padding:10px 50px; margin-right:10px; } .scroll_outer{ width: auto; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } Does that work?

Creating Horizontal Scroll and Wrapping Elements

1 个答案: