0

Is there a way to achieve scrolling of a list (ion-list) which is inside a DIV element so that it does not occupy whole screen? As shown on the image bellow:

enter image description here

For example list in a modal window is "scroll-able", but I cannot find a key to enable scrolling the list inside <div class=my-inset>.

List:

<ion-content scroll="false">
  <div class=my-inset>
    <ion-list>
      <ion-item ng-repeat="item in items">
        Item {{ item.id }}.
      </ion-item>
    </ion-list>
  </div>
</ion-content>

Css:

.my-inset{
  position: absolute;
  top: 20px;
  left: 15%;
  width: 70%;
  height: 200px;
  overflow:hidden;
  border: solid;
}

CodePen example.

Michal Foksa
  • 11,225
  • 9
  • 50
  • 68

1 Answers1

1

The simplest way I could recommend would be to change your CSS Overlay property on your .my-inset class. To fix it, I applied an overlay-x and overlay-y instead of just a single overlay, and set the overlay-y to "scroll". overflow-y: scroll; overflow-x: hidden;

I hope that helps!

mark.carrigan
  • 26
  • 4
  • Nice - this actually answers the question. Do you know how to keep the functionality, but hide the scroll bar? – Michal Foksa Sep 12 '16 at 15:44
  • There is a nice answer regarding this already, so I'd recommend taking a look at that as it answers it better than I would be able to: http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll – mark.carrigan Sep 13 '16 at 08:38