0

I'm using MeteorFamousViews to render a simple header/body/footer layout:

<template name="layout">
  {{#famousContext id="mainCtx"}}
    {{#HeaderFooterLayout headerSize="100" footerSize="60"}}
      {{#Surface target="header" class="red-bg" translate="[0,0,100]"}}
        <div id="header">header</div>
      {{/Surface}}

      {{#RenderController target="content" transition="slideWindowRight"}}
        {{>yield}}
      {{/RenderController}}

      {{#Surface target="footer" class="red-bg" translate="[0,0,100]"}}
        <div id="footer">footer</div>
      {{/Surface}}
    {{/HeaderFooterLayout}}
  {{/famousContext}}
</template>

The body contains an input field:

<template name="home">
  {{#Surface class="green-bg"}}
    <h2>Home Page</h2>
    <input type="text" style="width:100%;line-height:40px;" placeholder="Type something">
  {{/Surface}}
</template>

On Phonegap/Cordova on iOS 8, when the input field is in focus, a keyboard pops up. The desired behaviour is that the footer slides up with the keyboard, and the whole view is resized. This does not happen by default. Instead, the view doesn't change and the keyboard appears on top of the footer.

I can listen to native.keyboardshow and native.keyboardhide events to detect the keyboard popping up. The window.onresize event is not fired, but window.innerHeight is changing. How can I force the Famo.us view to repaint and fit in the new space? (preferably smoothly shrinking along the keyboard motion)

Thijs
  • 165
  • 6

1 Answers1

0

If you want to listen onresize event, use resize event instead, like below:

var mainContext = Engine.createContext(document.getElementById('famousAppContent'));
mainContext.on('resize', function(e) {
    console.log('mainContext After resize=' + mainContext.getSize());
}.bind(this));
Ulfalizer
  • 4,664
  • 1
  • 21
  • 30
Nam Hoang
  • 94
  • 6
  • Thanks. The problem, however, is that the app context is not resized when the keyboard comes up. I somehow need to do that manually, I think. – Thijs Mar 23 '15 at 08:04