Push page over tabs


Hello, I have the following problem:

I have a page “chats” with a list of chats within a tab view (tabs on the bottom).
If the user tabs on a certain chat i want to push a page “messages” that doesnt show the tabs.

I tried it with this.app.getRootNav().push(Messages, {chat});
The tabs are not visible anymore, but the space, where the tabs have been before is still there and is not used by the messages page.

Could any please tell me, how to achive a messages page with full height, no tabs and a back button, to get back to the chats page within the tab view?

Thanks a lot


What about setting the page you’re accessing with setRoot (so outside of a tab)? Whenever you remove elements from the dom like ion-header, ion-footer and perhaps ion-tabs as well, you should call a resize event on the ion-content to tell it should recalculate it’s height.

You can find it over here in the documentation:


If you are outside the tabs, you can make this in your app.module.ts

    IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: true,


You can use modelController. http://ionicframework.com/docs/api/components/modal/ModalController/

But you must to manual back button.


Ok, looks like i have to apologize.
The html/css template i used had a white placeholder element within, which just had the same position and dimensons like the tabs i used. So it looked like the tabs had been responsible for the white are on the bottom of the messages. But that was not the case…
Anyway, thanks for you help guys :slight_smile: