Question

We’re building an iPhone app that’s basically a wrapper around the mobile version of our website. Upon selecting the textarea in the chat page, the webview should be resized to fit the area above the keyboard.

However, when changing the frame of the uiwebview in keyboardwillshow, the focus of the textarea gets cancelled. When tapping the textarea again when the keyboard is showing, it does get focussed.

I’ve also tried changing the bounds instead of the frame. The textarea did get focus then, but somehow it anchored to the bottom of the original bounds instead of to the top. Does anyone have experience with this problem?

EDIT: I’ve fixed the first problem now by changing the webview size on keyboardDidShow instead of keyboardWillShow. However, it seems that the site does not properly update on the resize, and the header of the site does not get in the view. I edited the code below to how it currently is.

- (void)updateBounds {
    CGRect appFrame = [UIScreen mainScreen].applicationFrame, newFrame;

    if (!kbFrame.size.width) {
        // no keyboard
        newFrame = appFrame;

    } else if (kbFrame.size.width == appFrame.size.width) {
        // horizontal keyboard (relative to straight oriented device)
        newFrame = CGRectMake(0, 0, appFrame.size.width, appFrame.size.height - kbFrame.size.height);
    }
    else {
        newFrame = CGRectMake(0, 0, appFrame.size.width - kbFrame.size.width, appFrame.size.height);
    }

    webview.frame = newFrame;

}

- (void)keyboardDidShow:(NSNotification *)note {
    NSLog(@"keyboardShow");

    [[note.userInfo valueForKey:UIKeyboardFrameEndUserInfoKey] getValue: &kbFrame];

    [self updateBounds];
}

- (void)keyboardWillHide:(NSNotification *)note {
    NSLog(@"keyboardHide");

    kbFrame.size.width = 0;
    [self updateBounds];

    webview.frame = [UIScreen mainScreen].applicationFrame;
}

Answer 1

Eventually we ended up adding some logic to the website, and leaving the UIWebView alone. What we tried to achieve is now done with javascript to move some elements around on the webpage. It is sub-optimal, but it does the job without breaking everything.