Ion-header, IonToolBar get some issue layout relate with ion Form

Ionic Framework Ionic Vue
1

Hello, I started using ionic vue to build the tabs default by the first time I created the app.

Then I am tab1 to modify the page being look like an ionic form model (of course will have ion-input, etc,… involved with form)

But the problem is when I using the form on my phone, clicked to input, then the phone keyboard show up.
The point is when the keyboard shows up, the ion-tool-bar disappeared not showing up anymore even though I turn off the keyboard. Instead of using the bootstrap form, that no problem after the input and clicked input type something, the toolbar won’t be missing.

2

You might want to try the ion-header with condense, basically when the viewport of the phone gets smaller when the keyboard opens the toolbar just goes into hiding and a small header which you need to set inside of ion-content is shown

Here is a example

  <ion-content>
    <ion-header collapse="condense">
      <ion-toolbar>
        <ion-title size="large">My Navigation Bar</ion-title>
      </ion-toolbar>
    </ion-header>
      .... //your other content
      ....
      ....
  </ion-content>

this should atleast show the page title if you want you can also add back-button and other stuff just like normal header / toolbar

3

when I created the tabs app, the above will be the default setup. I just add the form below ion-header like:

ion-content > (ion-header[collapse="condense"] > ion-toolbar > ion-title[size="large"]{My Navigation Bar }) + (ion-grid > ion-row > form > ( ion-col > ion-item > ion-input)for many ion-input maybe)

when everything already completed setup, I build apk for the test and got what title say the problem, I clicked input, then the keyboard open toolbar missing. That ok, but when I closed the keyboard and keep slide up or down, the toolbar won’t show up anymore.

4

can you share the soucre code via github so that we can try to replicate the problem it on our machine…

5

I apologize for a long time for not reply you soon the question.

Finally, I figured out the problem by myself. The Problem is hidden in the ion grid when setting up the layout for the form.

I should not use too many grids on my form, making the toolbar unable to appear again in android for every device. Even though already turn off the keyboard.

For my case is just simple to remove all the grid and set again ion-input, then try much time for sure that not to make the toolbar hidden after the keyboard on and off