mobile keyboard takes space of bottom toolbar



  • thanks @khemry for reply This issue is in android phone And I have not used any keyboard plugin I have done something like

    <ons-page>
    <ons-navigator>
    <ons-page>
    <input type="text">
    </ons-page>
    </ons-navigator>
    </ons-page>
    </ons-page>

  • Monaca

    @Gaurav Thanks for the additional information. I tested it but I didn’t have the same issue. It’d be very useful if you could show me a screenshot of your issue: how your bottom toolbar space and App Screen looks short.



  • 0_1503304552030_blog1.png



  • sorry @khemry it’s ons-tabbar not toolbar


  • Monaca

    @Gaurav
    Hi, thanks for the screenshot. I understood your issue and here is the quick solution without using any additional plugin. Hide the tabbar when the textbox is focused and show it again when you leave the text box. Here is an example:

    <script>
         function hideTab(){
               tabbar.setTabbarVisibility(false);
         }
         function showTab(){
               tabbar.setTabbarVisibility(true);
         }
    </script>
    
    
    <ons-page>
        <ons-toolbar>
              <div class="center">My App</div>
        </ons-toolbar>
    
        <ons-tabbar position="bottom" id="tabbar">
              <ons-tab page="page1.html" label="Page 1" icon="square" active></ons-tab>
              <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab>
        </ons-tabbar>
      </ons-page>
    
    <ons-template id="page1.html">
        <ons-page>
          <div style="text-align: center">
                <input type="text" onfocus="hideTab()" onblur="showTab()">
          </div>
        </ons-page>
      </ons-template>

  • Onsen UI

    Another possibility is to use the keyboard plugin and change the value of shrinkView.



  • thanks for reply but is there anything wrong I am doing or I have to use keyboard plugin


  • Monaca

    @Gaurav There is nothing wrong with what you are doing but it’s the problem with Android. Therefore, you can either use JavaScript to hide tabbar as I suggested or add the keyboard plugin as Fran’s suggestion.



  • thanks @khemry


Log in to reply