Toolbar Falls Behind Keyboard on IOS

Questions
1

Hello. When I try to use toolbar to give suggestions about an input field on IOS virtual keyboard blocks the view of the toolbar. On android this issue is not present as the toolbar always get pushed up by keyboard.

    <body>
        <!-- Status bar overlay for fullscreen mode-->
        <div class="statusbar-overlay"></div>
        <!-- Panels overlay-->
        <div class="panel-overlay"></div>
        <!-- Views-->
        <div class="views">
            <!-- Your main view, should have "view-main" class-->
            <div class="view view-main">
                <!-- Top Navbar-->
                <div class="navbar">
                    <div class="navbar-inner">
                        <!-- We have home navbar without left link-->
                        <div class="left"></div>
                        <div class="center sliding">Market</div>
                        <div class="right">
                            <!-- Right link contains only icon - additional "icon-only" class-->
                            
                        </div>
                        <div class="subnavbar">
                            <div class="left"><a href="#" class="link icon-only open-panel">
                                <i class="icon icon-bars"></i>
                            </a></div>
                            <div class="center sliding">
                                <label id="BTCprice">BTC <i class="f7-icons size-10">money_dollar</i>
                                </label>
                            </div>
                            <div class="right"></div>
                        </div>
                    </div>
                </div>
                <!-- Bottom Toolbar-->
                <div class="toolbar toolbar-bottom">
                    <div class="toolbar-inner">
                        <div class="row" style="width: 100%">
                        </div>
                    </div>
                </div>
                <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
                <div class="pages navbar-through toolbar-through">
                    <!-- Page, data-page contains page name-->
                    <div data-page="market" class="page">
                        <!-- Scrollable page content-->
                        <div class="page-content" style="overflow:hidden; height=100%;">
                            <input placeholder='xyz' onfocus='myApp.showToolbar(".toolbar");'></input>
                        </div>
                    </div>
                </div>
                
            </div>
            <script type="text/javascript" src="cordova.js"></script>
            <!-- Path to Framework7 Library JS !-->
            <script type="text/javascript" src="js/framework7.js"></script>
        </div>
    </body>

is there a solution to prevent this happening?

3

This is because iOS scrolls the view on keyboard open. You can use this cordova plugin https://github.com/cjpearson/cordova-plugin-keyboard and do Keyboard.shrinkView(true). In this case iOS won’t scroll to input and will stretch the app view correctly