Can not scroll through form at all


#1

Hi everyone,

I am currently build a form that user can writing everything and submit the form, but the user can not scroll the form at all in IOS.This behavior is only happening in ios, not in android. See the video. I am pasting my code here. I have been searching around for a while and have tried changing Ion-content to ion-scrolling, that didn’t work. I am not sure what to do now, it would be great if anyone can help! Here is a video of the behavior. http://sendvid.com/i0n283rl

<ion-view title="Create Event">
<ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-email-unread" ng-if="exists" ng-click="openEvent()"></button>
</ion-nav-buttons>

<ion-content overflow-scroll="true" padding="true" class="has-header">


    <div class="list">
        <form novalidate name="eventForm" id="eventForm" ng-model="eventForm" ng-submit="submitForm(formName.$valid)" class="simple-form">

            <label class="item item-input item-select item-stacked-label">
                <span class="input-label">
    <b>Event Type</b>
</span>
                <div>
                    <br>
                    <select ng-model="user.eventType" required>
                        <option>Instant Hangout</option>
                        <option selected>Group Event</option>
                        <option>Alum Club</option>
                    </select>
                </div>
            </label>


            <label class="item item-input item-stacked-label">
                <span class="input-label"><b>Name of the Event</b></span>
                <input ng-model="user.nameOfEvent" type="text" placeholder="Name,type,and dates are required" required>
            </label>

            <label class="item item-input item-stacked-label">
                <span class="input-label"><b>Description</b></span>
                <input ng-model="user.description" type="text" placeholder="Describe the event">
            </label>

            <label class="item item-input item-stacked-label">
                <span class="input-label"><b>Address</b></span>
                <input type="text" ng-autocomplete ng-model="user.address" options="options" details="details" placeholder="Your address" ng-focus="disableTap()" />

                <!--                    ng-focus="disableTap()"-->
            </label>

            <label class="item item-input item-stacked-label">
                <span class="input-label"><b>Contact Email</b></span>
                <input ng-model="user.email" type="text" placeholder="ex: alumnae@wellesley.edu">
            </label>
            <!--                             ng-init = "user.email='User did not enter anything'"-->

            <label class="item item-input item-stacked-label">
                <span class="input-label"><b>Contact Number</b></span>
                <input ng-model="user.phone" type="tel">
            </label>



            <label class="item item-input item-stacked-label">
                <span class="input-label">Date</span>
                <input ng-model="user.date" type="date" required>
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Time</span>
                <input ng-model="user.time" id="myTime" type="time">
            </label>


            <label class="item item-input item-select item-stacked-label">
                <span class="input-label">
    <b>Please specify time zone</b>
</span>




                <div>
                    <br>
                    <select ng-model="user.timeZone">
                        <option>EST</option>
                        <option>PST</option>
                        <option>etc..</option>

                    </select>
                </div>
            </label>


            <label class="item item-input item-select item-stacked-label">
                <span class="input-label">
    <b>Invite Alumnae Within A...</b>
</span>
                <div>
                    <br>
                    <select ng-init="user.radius='25 mile radius'" ng-model="user.radius">
                        <option>1 mile radius</option>
                        <option>5 mile radius</option>
                        <option selected>25 mile radius</option>
                        <option>50 mile radius</option>
                        <option>75 miles</option>
                    </select>
                </div>
            </label>

            <label class="item item-input item-stacked-label">
                <span class="input-label">
   
</span>


                <div>
                    <img ng-src="data:image/jpeg;base64,{{showPic}}" width="100%" />
                </div>

                <center>
                    <div>
                        <button class="button button-small button-positive" ng-click="openModal()">upload a photo</button>
                    </div>


                </center>
            </label>





            <input class="button button-block button-positive" type="submit" value="Create the Event" ng-click="update(user)" ng-disabled="eventForm.$invalid" />
        </form>
    </div>


</ion-content>

#2

Any help with be really appreciated!!!