Scrolling content, in a Slide, in a Slidebox, IN a Modal - how?

ionic-v1
1

This may sound a little crazy, but hear me out.

To add a new item you touch a button and a modal comes up. The modal has a slidebox with two slides in it, one for each of set of data you need to add.

My problem is the form in the slide doesn’t scroll, even if I put a scroll in it like this:

<div class="modal" style="width: 100%; height: 100%; left:1px;top:1px">
  <ion-header-bar class="bar bar-header bar-calm">
    <h1 class="title">Add Item</h1>
  </ion-header-bar>
  <ion-content>
    <ion-slide-box on-slide-changed="slideHasChanged($index)">
      <ion-slide>
        <div class="bar bar-header bar-balanced">
          <h1 class="title">General</h1>
        </div>
        <scroll style="height:1400px">
        <div class="list has-header">
          <label class="item item-input">
            <span class="input-label">Date</span>
            <input type="date">
          </label>
          <div class="row">
            <div class="col">
              <label class="item item-input">
                <span class="input-label">Start</span>
                <input type="time">
              </label>
            </div> 
            <div class="col">
              <label class="item item-input">
                <span class="input-label">End</span>
                <input type="time">
              </label>
            </div>
          </div>
          <label class="item item-input item-select">
            <div class="input-label">
              Supervision
            </div>
            <select>
              <option>Blue</option>
              <option selected>Green</option>
              <option>Red</option>
            </select>
          </label>
          <label class="item item-input item-select">
            <div class="input-label">
              Teaching
            </div>
            <select>
              <option>Blue</option>
              <option selected>Green</option>
              <option>Red</option>
            </select>
          </label> 
          <label class="item item-input item-select">
            <div class="input-label">
              Supervisor
            </div>
            <select>
              <option>Blue</option>
              <option selected>Green</option>
              <option>Red</option>
            </select>
          </label> 
          <label class="item item-input item-select">
            <div class="input-label">
              Speciality
            </div>
            <select>
              <option>Blue</option>
              <option selected>Green</option>
              <option>Red</option>
            </select>
          </label>  
          <label class="item item-input item-select">
            <div class="input-label">
              Priority
            </div>
            <select>
              <option>Blue</option>
              <option selected>Green</option>
              <option>Red</option>
            </select>
          </label>   
        </div><!-- list -->
        </scroll>
      </ion-slide>

This is just one slide in the slidebox.

Now I don’t know if it is that its a set of labels in there or what, and I purposely made the height higher than my phone. It doesn’t work in browser of when built for Android with Cordova (although eveything else in the app does).

I’ve tried the content tab. Same thing.

Anyone any ideas?

2

No one? Other people must be using this UI component like this - it’s so useful!

3

So I’ve done a few tests elsewhere in the app. It appears you cannot put an ion-scroll inside a div class=“list”, or at least its not working for me anywhere.

Am I doing something really wrong?

My structure is:

 <ion-content class="has-header">
 <ion-scroll style="height:2000px">
        <div class="list">
4

So the solution seems to be not using ion-scroll at all. I’ve used ion-content instead and it works.

What is ion-scroll for?