Keyboard shrinks view iOS

ionic-v1
1

Hey guys!

I have pretty frustrating problem. I have an app, where I have couple of input fields. I use com.ionic.keyboard, and whenever it pops out in my iPhone 5, it changes the size the view. What I’ve already tried was:

<meta name="viewport" content="initial-scale=1, user-scalable=no">

and

<preference name="KeyboardShrinksView" value="false" />

However, none of those worked. I’ve also included some !important in my css, but this also doesnt seem to have any impact. The problem is really annoying, as I use vw and vh in my app design.

Thanks for you input,
uksz

2

could you provide an example layout of where you are seeing this?

3

Thanks so much for your answer!

Here is the view where I have a problem:

<ion-view title="Create form">
<ion-content>
    <ion-scroll direction="y" style="margin-top: 1.5vh;   overflow-y: scroll; height: 100%;width: 100%;">
    <div class="list create-form">
        <form name="Form" ng-submit="submitForm(Form.$valid)" novalidate>
            </div>
                <span class="input-label">Form title</span>
                <input class="boxed" type="text" ng-model="form.title" placeholder="Enter title here" required>
                <span class="input-label">Organization</span>
                <input class="boxed" type="text" ng-model="form.organization" placeholder="Enter title here">
            <label class="item item-input item-stacked-label">
                <span class="input-label">Date</span>
               <input class="date" type="date" ng-model="form.date" placeholder="date here required"><img class="calendar">
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Time</span>
                <input class="time" type="time" ng-model="form.time" placeholder="time" required>
            </label>
            <div select-location class="form-location" location="form.location" coords="form.coords"> </div>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Form</span>
                <textarea ng-model="form.description" placeholder="Description"></textarea>
            </label>
            <li class="item item-toggle">
                Private
                <label class="toggle toggle-assertive">
                    <input type="checkbox" ng-model="form.private">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
            </li>
            <li class="item item-toggle">
                Checkbox
                <label class="toggle toggle-assertive">
                    <input type="checkbox" ng-model="form.Checkbox">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
            </li>
            <div class="item range range-positive">
                <span>Maximum</span>
                <i class="icon ion-android-remove-circle"></i>
                    <input type="range" id="volume" name="volume" min="0" max="30" value="15" ng-model="form.max" oninput="amount.value=volume.value">
                 <output id="amount" name="amount" for="volume"> 15</output>

                <i class="icon ion-android-add-circle"></i>
            </div>
            <div class="button-div">
                <button type="submit" class="create-button" ng-disabled="Form.$invalid">Submit!</button>
            </div>
            <div class="back-button"><button back-button>Back</button></div>
        </form>
    </div>
    <div style="height: 7vh;"></div>
    </ion-scroll>
</ion-content>

And directive for select-location:

<label class="item item-input item-stacked-label">
<span class="input-label">Location - drag map or enter address</span>
<input class="address" type="text" ng-model="location" placeholder="location" id="autocomplete">

<style>
.select-location {
    position: relative;
}
#markerOnDrag img {
    content: url("../img/map/pin.png");
    height: 40px;
    width: 40px;
}
#markerOnDrag {
    position: absolute;
    left: 45vw;
    top: 18vh;
   z-index: 9000;
    display: none;
}

Thanks you so much again!

4

Could you please put this into a codepen?

5

Yes! I will do it as soon as I get out of office. I’ve done some debugging, and I’ve realized that the problem is caused whenever keyboard-open class is added to the body of my html. Its weird, because not all of the input fields add this class whenever the keyboard is open…

6

Alright. I’ve fixed the issue: most of my css styling was in VH’s and VW’s. Keyboard did changed the view size, so changing styling into pixels helped.