Ion-slides with form inputs blocks page scrolling

Question

I have a few form inputs inside a <ion-slide > but I can not scroll to view all fields in the slide, it prevents me from scrolling inside the slide. On a device, when there is an ion-input, the ion-list scrolling behaviour does not work.

There is also some CSS issue with the labels overlapping (See img below)... I am using Ionic v 1.3.

<ion-view scroll="true">
        <ion-nav-bar class="bar-light">

            <ion-nav-buttons side="left">
              <button class="button button-positive button-clear no-animation"
                      ng-click="startApp()" ng-show="!slideIndex">
                Skip 
              </button>
              <button class="button button-positive button-clear no-animation"
                      ng-click="previous()" ng-show="slideIndex > 0">
                Previous
              </button>
            </ion-nav-buttons>
            <ion-nav-buttons side="right"> 
              <button class="button button-positive button-clear no-animation"
                      ng-click="next()" ng-show="slideIndex != 2">
                Next
              </button>
              <button class="button button-positive button-clear no-animation"
                      ng-click="startApp()" ng-show="slideIndex == 2">
                Finish
              </button>
            </ion-nav-buttons>

        </ion-nav-bar>

        <ion-slide-box on-slide-changed="slideChanged(index)" scroll="true">

          <ion-slide scroll="true">


            <h3>Start  </h3>

            <div class="list">

              <label class="item item-input item-stacked-label">
                <span class="input-label">First Name</span>
                <input type="text" placeholder="John">
              </label>
              <label class="item item-input item-stacked-label">
                <span class="input-label">Last Name</span>
                <input type="text" placeholder="Suhr">
              </label>
              <label class="item item-input item-stacked-label">
                <span class="input-label">Email</span>
                <input type="text" placeholder="john@suhr.com">
              </label>
              <label class="item item-input item-stacked-label">
                <span class="input-label">Email (use your gym email)</span>
                <input type="text" placeholder="john@suhr.com">
              </label>
              <label class="item item-input item-select">
                    <div class="input-label">
                      Select your Gym Location
                    </div>
                    <select>
                      <option>FitnFast KellyVille</option>
                    </select>
               </label>


            </div>




          </ion-slide>

          <ion-slide>
            <h3>Using Awesome</h3>

            <div id="list">
              <h5>Just three steps:</h5>
              <ol>
                <li>Be awesome</li>
                <li>Stay awesome</li>
                <li>There is no step 3</li>
              </ol>
            </div>
          </ion-slide>

          <ion-slide>
            <h3>Any questions?</h3>
            <p>
              Too bad!
            </p>
          </ion-slide>

        </ion-slide-box>
      </ion-view>

Answer 1

The thing that helped me in exactly the same problem was putting scrollAssist: false in my app.module.ts like so:

IonicModule.forRoot(MyApp, { scrollAssist: false, tabsHideOnSubPages: true }),

Answer 2

I had the same issue and found on the ionic forums a solution by using a ion-content inside of ion-slide and it's working for me now.

https://github.com/driftyco/ionic/issues/5297

<ion-view>
  <ion-content scroll="false">
    <ion-slide-box>
      <ion-slide>
        <ion-content>
          <div class="box blue"><h1>BLUE</h1></div>
        </ion-content>
      </ion-slide>
      <ion-slide>
        <ion-content>
          <div class="box yellow"><h1>YELLOW</h1></div>
        </ion-content>
      </ion-slide>
      <ion-slide>
        <ion-content>
          <div class="box pink"><h1>PINK</h1></div>
        </ion-content>
      </ion-slide>
    </ion-slide-box>
  </ion-content>
</ion-view>