# Prevent keyboard pushing view in Ionic and MKWebVIew in iOS

**URL:** <https://forum.ionicframework.com/t/prevent-keyboard-pushing-view-in-ionic-and-mkwebview-in-ios/88559>\
**Category:** ionic-v3\
**Created:** [May 2, 2017, 9:42am UTC](https://forum.ionicframework.com/t/prevent-keyboard-pushing-view-in-ionic-and-mkwebview-in-ios/88559 "2017-05-02T09:42:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dranix](https://avatars.discourse-cdn.com/v4/letter/d/8e8cbc/32.png) [@Dranix](https://forum.ionicframework.com/u/Dranix)\
**Post date:** [May 2, 2017, 9:42am UTC](https://forum.ionicframework.com/t/prevent-keyboard-pushing-view-in-ionic-and-mkwebview-in-ios/88559/1 "2017-05-02T09:42:28Z")

</div>

Hi all, I’m using Ionic 3 and MKWebView. I want to achieve a search screen that overlay current screen, auto focus on the input, and show the keyboard.  
However every time the keyboard shows up, it push the view upward. This is the video of it: [youtube](https://youtu.be/npr10Gw2XB8)

Those are my code:  
**HTML:**

```auto
<ion-content padding fullscreen overflow-scroll=”true” [ngClass]="{'blur': showSearchScreen}" #body>
</ion-content>

<div *ngIf="showSearchScreen" class="overlay">
    <div class="search-box-wrapper">
        <ion-input type="text" [(ngModel)]="searchText" class="search-box" placeholder="Type search term" #searchInput [focus]="searchInput">
        </ion-input>
    </div>
</div>

```

**.ts:**

```auto
    @ViewChild('searchInput') searchInput ;

```

**And the auto focus directive:**

```auto
@Directive({
    selector: '[focus]' // Attribute selector
})

export class FocusDirective {

    @Input() focus: any;

    constructor(){
    }

    ngAfterViewInit(){
        this.focus.setFocus();
    }
}

```

**config.xml**

```auto
    <preference name="KeyboardDisplayRequiresUserAction" value="false" />

```

I tried some solutions but none worked for me. Any suggestion is highly appreciated. Thank in advance.

---

<div class="post-metadata">

**Author:** ![polfdz](https://avatars.discourse-cdn.com/v4/letter/p/5f8ce5/32.png) [@polfdz](https://forum.ionicframework.com/u/polfdz)\
**Post date:** [October 10, 2017, 6:51am UTC](https://forum.ionicframework.com/t/prevent-keyboard-pushing-view-in-ionic-and-mkwebview-in-ios/88559/2 "2017-10-10T06:51:16Z")

</div>

Any updates on this issue? I have the exact same problem

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [October 10, 2017, 9:50am UTC](https://forum.ionicframework.com/t/prevent-keyboard-pushing-view-in-ionic-and-mkwebview-in-ios/88559/3 "2017-10-10T09:50:42Z")

</div>

What is “MKWebView”?

---

<div class="post-metadata">

**Author:** ![polfdz](https://avatars.discourse-cdn.com/v4/letter/p/5f8ce5/32.png) [@polfdz](https://forum.ionicframework.com/u/polfdz)\
**Post date:** [October 10, 2017, 10:03am UTC](https://forum.ionicframework.com/t/prevent-keyboard-pushing-view-in-ionic-and-mkwebview-in-ios/88559/4 "2017-10-10T10:03:40Z")

</div>

I think he means WKWebView

---

<div class="post-metadata">

**Author:** ![polfdz](https://avatars.discourse-cdn.com/v4/letter/p/5f8ce5/32.png) [@polfdz](https://forum.ionicframework.com/u/polfdz)\
**Post date:** [October 10, 2017, 10:10am UTC](https://forum.ionicframework.com/t/prevent-keyboard-pushing-view-in-ionic-and-mkwebview-in-ios/88559/5 "2017-10-10T10:10:45Z")

</div>

It may be related to  
[https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/4](https://forum.ionicframework.com/t/keyboard-pushes-elements-out-of-top-of-view/51212/4)

However I cannot solve by any of the proposed solutions