Michal Foksa Michal Foksa - 2 months ago 20
CSS Question

Ionic: Enable scroll in inset list

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.

Answer

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!