How to force the tabs-bar to be visible?

Hi all,
I’ve created a page that contains an iframe:

<!-- empty -->
  <iframe *ngIf="externalLink" [src]="externalLink" width="100%" height="100%" frameborder="0" ></iframe>

If I link this page to one of the links of the tabs-bar I can see correctly the remote site inside the frame of the App.
And I can still see the tabs-bar.

But if I call the BrowserPage from another page with this command:
this.navCtrl.push(BrowserPage, {externalUrl: wsUrl});

I can see the remote site, but I can’t see the tabs-bar.
Which is the difference between the two calls?
How can I force the tabs-bar to be visible?

I’m using Ionic CLI 3.6.0.
Thank you.


Maybe it’s a small semantic thing, but I rarely come up with something I consider particularly good in the long run when I have my mind in the track of “how do I force X to happen?”.

The first one acts within the context of the navigation stack belonging to the page containing the <ion-tabs> element. The second does not. If you wish to navigate to a specific tab, there are several threads discussing how to do this, here are a few.

Hi rapropos,
thank you for your answer. Perhaps I’ve used the wrong words to explain the problem.
I’ve now understood that probably I can’t see the tabs because the push command opens a subpage.
So I’ve found some posts in which they say that to activate the tabs I have to set the parameter " tabsHideOnSubPages" to false.
I’ve tried this, but does not work for me.
But I know that it is possible to show the tabs bar because this example does the exact thing I want to do:
When I click on “Go to Another Pages” it opens a new page with the tabs-bar visible.

So I’m trying to understand the differences between this code and my code.

No, this is irrelevant, as it’s already the default. Please look through the threads I linked to; you need to keep the tabs page in the main nav stack and change its selectedIndex attribute.

ok, I’ll see the links, but I can’t use a tabIndex because the page is not in the tab menu, it’s a secondary page. It’s the detail page of an item and I have to pass to this page the index of the item too.

Then it doesn’t make any sense for it to have the tabs present. That breaks the entire UI contract of tabs.

1 Like

You can very easily do it by adding the following code in your app.modules.ts file’s imports array like this:

IonicModule.forRoot(MyApp, {
   tabsHideOnSubPages: false

But I share @rapropos’s concern, make sure you’ve a good reason to show the tabs in a sub page and are conveying to the user somehow that they are in a sub page.

Yes I have:
imports: [
IonicModule.forRoot(MyApp,{tabsHideOnSubPages: false})

But it doesn’t work.

However, you and @rapropos are right perhaps it is not important to have the tabs on that page.

Thank you both.


1 Like