Push page over tabs

Ionic Framework ionic-v3
1

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.

image
Chats.PNG333×586 11.1 KB

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
Skee

2

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:

3

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

    IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: true,
1 Like
4

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

But you must to manual back button.

5

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:

Skee