Ionic-framework: Tabs remain at top of app after adding property tabsPlacement: 'bottom' to app.ts

[huntmj01]

Short description of the problem:

According to the V2 Config there are three ways to place the tabs at the bottom of your app:

1. Add the tabsPlacement property to ionic bootstrap in app.ts
2. Add the tabsPlacement property to ion-tabs in tabs.html
3. Add a query string http://localhost:8100/?ionicTabsPlacement=bottom

I have done all three and my tabs still remain at the top of my app:

What behavior are you expecting?

I want my ionic tabs to be placed at the bottom of the screen.

Steps to reproduce:

1. Create a new ionic tabs project: ionic start TabsTopBottom tabs --v2
2. Modify app.ts to include the tabsPlacement: "bottom" property
3. Run the app.

app.ts:

import {Component} from '@angular/core';
import {App,Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
})
export class MyApp {

  private rootPage: any;

  constructor(private platform: Platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp, [], {
  tabsPlacement: "bottom"
});

tabs.html:

<ion-tabs tabsPlacement="bottom">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Other information:
It appears to me that the tabplacement and tabbarplacement never change to "bottom".

Which Ionic Version?

2.0.0-beta.10

Plunker that shows an example of your issue

http://embed.plnkr.co/jCqyxvqJtHV9hPYxsolw/

Run ionic info from terminal/cmd prompt: (paste output below)

[Manduro]

Have a look at https://github.com/driftyco/ionic/issues/7143. The tabsPlacement config option works from beta 11. Up to beta 10 the correct option to use is tabbarPlacement.

[huntmj01]

Changing

ionicBootstrap(MyApp, [], {
  tabsPlacement: "bottom"
});

to

ionicBootstrap(MyApp, [], {
  tabbarPlacement: "bottom"
});

fixed the problem.

Thanks!

[brandyscarney]

Yes, as @Manduro said, the beta 10 config option for this is tabbarPlacement. Right now the API docs are using the nightly version which shows our latest changes that haven't been released. If you select the dropdown in the top left and change it to beta 10 you will see all of the documentation for that release. We have an open issue to change this to the latest stable release: https://github.com/driftyco/ionic-site/issues/692

[huntmj01]

Thank You Brandy! Once the next release is released I will know to update my code. I didn't realize you could select which version of ionic to view in the documentation so thank you for that information also.

[srinivasulurao]

How can we add the tab only for one particular page, i have 3 tabs implemented in my app out of whoch only one tab needs to go up, the current solution will add all the tabs at the top, any solution?

[kensodemann]

@srinivasulurao - not sure I fully understand what you are asking. Let me tell you what I think you are asking, and you tell me if I am right or not.

It sounds like you have three tabs on the bottom, say "Home", "About", and "Contacts"

|           Header          |
+---------------------------+
|                           |
|                           |
|                           |
+--------+--------+---------+
|  Home  |  About | Contact |
+---------------------------+

And you want to move just one of them to the top, so you would have something more like this:

|           Header          |
+---------------------------+
| Contact |                 |
+---------+                 |
|                           |                   
|                           |                   
|                           |                   
+--------------+------------+
|      Home    |    About   |
+---------------------------+

Is that what you are saying you want to do?

[chandanch]

@srinivasulurao Interesting, I feel it would void the tab principle and may not be a good user experience.

[srinivasulurao]

@kensodemann thank you so much for the quick reply, my bad that i have not explained here properly. So here is my requirement. i have two page where i want to keep the tab sets in different positions, as shown below.
Page 1 -> The tab set position should be at the bottom.
+----------------------------+
| Header |
+---------------------------- +
| ----------------------------- |
| ----------------------------- |
| ----------------------------- |
| ----------------------------- |
+--------+--------+---------+
| Home | About | Contact |
+-----------------------------+

Page 2-> the tab set position should be at the top.

+----------------------------+
| Header |
+--------+--------+---------+
| Events | Settings | Profile |
+-----------------------------+
| ----------------------------- |
| ----------------------------- |
| ----------------------------- |
| ----------------------------- |
+--------------------------- -+

I am using the latest version of the ionic and i was trying to edit the app.module.ts file where i added the following code for tab placement and it changed the tab positions, but it applied the same bottom position for both the pages.
imports: [ BrowserModule, IonicModule.forRoot(MyApp,{tabsPlacement: 'bottom'}) ]
I hope i have explained clearly now.
Thanks a lot :)

[kensodemann]

Thank you for the clarification. I do not believe that is possible with the way things work currently. Last time I looked into something like this I believe the answer was that the tab position was determined at the time type tabs were instantiated, but could not be updated on the fly like that.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.