How to force the tabs-bar to be visible?

Ionic Framework ionic-v3
1

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

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

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.

Claudio

2

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.

3

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:
https://ionicframework.com/docs/api/config/Config/
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.

4

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.

5

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.

6

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

1 Like
7

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.

8

Yes I have:
imports: [
BrowserModule,
HttpModule,
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.

cld

1 Like