How to render Tabs in the center of the screen

ionic-v1
1

I want to show tabs in the center of the mobile screen. I am showing some data above the tab and want to implement tabulation of screen. Any help would be helpful. Thanks in advance

1 Like
2

I have the same problem, the problem is not to show tabs at the center of the page, taht can be solved via css, but that only the content below the tabs will scroll, and the worst thing is that not the entire content will be visible, the scroll doesn’t reach all the content.
I would like to scroll the entire ‘page’ or, at least, scroll through all the content.

In the ‘container’ page template I have this (infocorporate):

<img src="some img path" />

     <ion-tabs class="tabs-energized tabs-top top-277">

         <ion-tab title="STORY" href="#/app/story" >
                <ion-nav-view name="story"></ion-view>
         </ion-tab>

     <ion-tab title="VALUES"  href="#/app/values">
                <ion-nav-view name="values"></ion-view>
      </ion-tab>

 </ion-tabs>

Adding the class ‘top-277’ to < ion-tabs >, and giving to it the rule top: 277px, the tabs renders at the center of page ( I calculate the height of header and my img)

Than in the ‘child page’ n.1 (story) I have whatever I want, like this:

 <ion-view cache-view="false">
     <ion-content class="has-header has-tabs">

          <img src="my second img path" />
          <p>some text and very long</p>

     </ion-content>
 </ion-view>

In this way only the part in this frame of the page will scroll.
Any suggestion how to make the entire page scroll???

By the way my routing is:

.state('app.infocorporate', {
      url : '/infocorporate',
      abstract : true,
      views : {
        'content@app' : {
          templateUrl : 'assets/tmpl/infocorporate.html'
        }
      }
    })
    .state('app.infocorporate.story', {
      url : '/story',
      views : {
        'story@app.infocorporate' : {
          templateUrl : 'assets/tmpl/story.html'
        }
      }
    })
    .state('app.infocorporate.values', {
      url : '/values',
      views : {
        'values@app.infocorporate' : {
          templateUrl : 'assets/tmpl/vlaues.html'
        }
      }
    })
3

do you got the out put i am also facing the same issues i have placed question in stackoverflow http://stackoverflow.com/questions/37405483/how-to-use-ion-tabs-inside-a-div still no reply if you know how to implement it please help me