Ion-scroll hiding content

@opahopa wrote:

Greetings.

i’m trying to make a scrollable horizontal images preview.

<ion-scroll scrollX="true">
    <ion-row nowrap class="photoBlock">
      <div class="scroll-item">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <img src="http://via.placeholder.com/150x150">
      </div>
      <div class="scroll-item">
        <ion-icon name="camera" class="icon-lg" (click)="takePicture()"></ion-icon>
      </div>
    </ion-row>
  </ion-scroll>

  .photoBlock {
    min-height: 180px;
    align-items: center;
    justify-content: center;

    ion-icon {
      font-size: 5.6em;
      vertical-align: middle;

      border: 2px solid map_get($colors, light-grey);
      padding: 9px 21px 9px 21px;
    }
  }

  ion-scroll[scrollX] {
    background-color: rgba(194, 194, 194, 0.34);
    min-height: 180px;

    .scroll-item {
      min-height: 150px;
      min-width: 150px;
      padding: 25px;
    }
  }

for unknown reason part of the content on the left side is hidden / not scrollable.

ion-scroll.png1271x233 16.2 KB

i’ve read a few SO topic on it, spent more then 2 hours already… why would this happen, what is wrong?

Posts: 1

Participants: 1

Read full topic