Onsen 2.0 List with overflow scroll does not work

Question

I am having an ons-list but when the list gets longer than the page, you can scroll or do anything to see the other items.

<div id="mycontacts" style="position: absolute; width: 100%; top: 0px;">
  <ons-list style="background: #f9f9f9;">
    <ons-list-header style="background: #f9f9f9;">Contacts:</ons-list-header>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
  </ons-list>
</div>

How to make a list where the user can scroll down to see more/the other list item?

EDIT:

My real code where it doesnt work is this, there are lots of elements which are maybe not diaplyed wll beacause of my missing javscript but the problem with the list should be solved in this html lines.

<!-- TAB 1 STARTSEITE -->
<ons-template id="tab1.html">
<ons-page id="tab1">
<ons-toolbar style="">
<div class="left"> <!--left-->
  <ons-toolbar-button onclick="fn.open()">
    <ons-icon icon="md-menu"></ons-icon>
  </ons-toolbar-button>
</div>
<div id="tab1toolbarcenter" class="center"><!--center-->
  <ons-toolbar-button id="maincarousel1" onclick="maincarousel(1)" style="opacity: 1;">
    <ons-icon icon="fa-calendar-o"></ons-icon>
  </ons-toolbar-button>
  <ons-toolbar-button id="maincarousel2" onclick="maincarousel(2)" style="opacity: 0.6;">
    <ons-icon icon="ion-chatboxes"></ons-icon>
  </ons-toolbar-button>
  <ons-toolbar-button id="maincarousel3" onclick="maincarousel(3)" style="opacity: 0.6;">
    <ons-icon icon="fa-newspaper-o"></ons-icon>
  </ons-toolbar-button>
</div>
<div class="right"><!--right-->
  <ons-toolbar-button id="main_rightupicon" onclick="showdialog('dialog-2')">
    <ons-icon icon="filter"></ons-icon>
    </ons-toolbar-button>
    </div>
    </ons-toolbar>

   <ons-carousel fullscreen swipeable auto-scroll id="maincarousel">
   <!-- Seite 1 -->
   <ons-carousel-item id="seite1" style="background: #f9f9f9;">
   <div id="main_table" style="height: 460px; width: 100%; margin-top: 30px; background: #f9f9f9;">
    <center><div id="tabellenueberschrift" style="margin-top: 0px; height: 50px; line-height: 21px; color: black; font-size: 18px; background: #f9f9f9; opacity: 0.8;"></div></center>
    <div id="main_pfeillinks" style="width: 50%; height: 50px; float: left; margin-top: -50px;">
      <div style="width: 40px; height: 40px; margin-top: 3px; left: 9px; position: absolute;"><ons-ripple color="#C8C8C8" style="opacity: 0.4; border-radius: 20px;"></ons-ripple></div>
      <ons-icon icon="fa-angle-left" size="40px" style="color: black; opacity: 0.15; margin-left: 20px;"></ons-icon>
      </div>
      <div id="main_pfeilrechts" style="width: 50%; height: 50px; float: right; margin-top: -50px;">
      <div style="width: 40px; height: 40px; margin-top: 3px; right: 9px; position: absolute;"><ons-ripple color="#C8C8C8" style="opacity: 0.4; border-radius: 20px;"></ons-ripple></div>
      <ons-icon icon="fa-angle-right" size="40px" style="color: black; opacity: 0.15; float: right; margin-right: 20px;"></ons-icon>
      </div>
      <center><ons-progress-circular id="main_tabelle_loader" indeterminate style="margin-top: 66px; visibility: visible;"></ons-progress-circular></center>
      <table id="kalender" style="margin-top: -105px; opacity: 0.3; background: #f9f9f9;"></table>
      </div>
      <p id="main_sortieren_text" style="text-align: center; opacity: 0.6; padding-top: 20px;">
      </p>
      <ons-fab position="bottom right">
       <ons-icon icon="fa-question"></ons-icon>
      </ons-fab>
</ons-carousel-item>  
<!-- Seite 2 -->
<ons-carousel-item fullscreen swipeable overscrollable id="seite2" style="background: #f9f9f9;">
  <ons-list id="seite2_suchenkontaktetabelle" style="position: absolute; width: 100%; top: 0px; visibility: hidden; background: #f9f9f9;">
  </ons-list>
  <center><ons-progress-circular id="seite2_mainloader" indeterminate style="margin-top: 300px; visibility: hidden;"></ons-progress-circular></center>
</ons-carousel-item>
<!-- Seite 3 -->
<ons-carousel-item fullscreen swipeable auto-scroll id="seite3" style="background: #f9f9f9;">
  <p style="text-align: left; margin-left: 16px; opacity: 0.7; padding-top: 20px; font-size: 18px;">
    Neuigkeiten (prealpha.debugv3.5.9)
  </p>
  <div style="margin: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); background-color: white; height: 150px;"><ons-ripple color="#E2E2E2"></ons-ripple></div>
  <div style="margin: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); background-color: white; height: 150px;"><ons-ripple color="#E2E2E2"></ons-ripple></div>
  <div style="margin: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); background-color: white; height: 150px;"><ons-ripple color="#E2E2E2"></ons-ripple></div>
  </ons-carousel-item>
  </ons-carousel>
  </ons-page>
  </ons-template>

The problem is in Seite 2 I add ons-list-items with javascript to 'seite2_suchenkontaktetabelle' and then you cant scroll down to see all items. Someone found my fault?

Answer 1

I believe your issue is due to the parent div. In this codepen I have removed that and added your attributes to the ons-list itself. I have tested it in Android with the debugger and it worked fine.

<ons-list id="mycontacts" style="position: absolute; width: 100%; top: 0px; background: #f9f9f9;">
    <ons-list-header style="background: #f9f9f9;">Contacts:</ons-list-header>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
    <ons-list-item tappable style="background: #f9f9f9;">
      ...
    </ons-list-item>
  </ons-list>

EDIT: Oh, with your full code you have a completely different issue. For every carousel item, you need a ons-page. I updated the codepen to show you how it works. This has been verified on Android as well.