Scroll bar no longer appearing

user_13410511 0
Viewed 360

The scroll bar in my app has suddenly vanished and I can't understand why. I have configured the scroll bar in my style.css file on my Angular app. It was there about an hour ago and I haven't changed anything in the any of the other css files. Does anyone know how to make it re-appear?!

enter image description here

There should be a scroll bar on the right hand side

Here is the styles.css file:

::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 10px;
  }

This is the gallery list css file. This is the component that is being displayed in the image below the header:

ul {
    margin:0 10px 0 0;
    padding:0;   
}

li { list-style: none; }

.item-list-container {
    column-count: 4;
    column-gap: 1.1em;
    margin-top: 107px;   
}

Gallery-list html file:

<ul class="container">
    <li class="item-list-container oneSec">
        <app-image-item
          *ngFor="let imageEl of galleryList"
          [image]="imageEl"
          (click)="onImageSelect(imageEl.id)"
          (click)="onLike(imageEl.imagePath)">
        </app-image-item>
    </li>
</ul>
angular css
1 Answers

Try to decrease the height of the li tag 

<ul class="container">
        <li class="item-list-container oneSec" style="height: 200px">
            <app-image-item
              *ngFor="let imageEl of galleryList"
              [image]="imageEl"
              (click)="onImageSelect(imageEl.id)"
              (click)="onLike(imageEl.imagePath)">
            </app-image-item>
        </li>
    </ul>

Because sometimes the scroll bar only appears when the container is small in height and it has more items

user_84865580
Related