mobile keyboard takes space of bottom toolbar

[Gaurav]

I have taken a text box when I click on that It opens keyboard but it takes my bottom toolbar space and App Screen looks short and by clicking back it looks fine

[khemry]

Hi, sorry for a late reply. Please tell us more about your issue.
Is this issue for iOS or Android? Did you any keyboard plugin? If so, what is it?

[Gaurav]

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>

[khemry]

@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.

[Gaurav]

[Gaurav]

sorry @khemry it’s ons-tabbar not toolbar

[khemry]

@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>

[Fran Diox]

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

[Gaurav]

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

[khemry]

@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.

[Gaurav]

thanks @khemry