I have a blank app with many pages. One of these pages needs to be diveded into tabs.
I want a few tabs to be displayed under the header (which has logo and back button).
However, for some reason, the tabs are hidden almost completly beneath the header.
The structure is the following:
<ion-view view-title="MyPage">
<ion-header-bar align-title="center">
<div class="app_header_side">
<button class="button back-button">
<i class="icon ion-ios-arrow-back"></i>
</button>
</div>
<div class="app_header_center">
<div class="text-center">
LOGO
</div>
</div>
<div class="app_header_side">
</div>
</ion-header-bar>
<ion-content class="padding has-header">
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="All time" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="Month" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
<!-- Tab 2 content -->
</ion-tab>
<ion-tab title="Week" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
I have tried to put the tabs everywhere. In the header, before "ion-view", before "ion-content". Nothing worked.
The only way to make ti work was to add
style="padding-top: 30px;"
in the tag for "ion-content". But I would prefer to avoid putting fixed padding.
I would suggest the following by declaring the header as follow:
<ion-header-bar class="bar-header">
and then defining the has-header
<ion-content class="has-header">
Alternatively as a test you can set:
<ion-content class="has-subheader">
That would imply that something like a ion-nav-bar for example is set as the header already. Then set the ion-header-bar as bar-subheader.
IONIC Headers and Sub-Headers
Alternatively you can place tab at bottom same like iOS.
Set $ionicConfigProvider.tabs.position('bottom'); in .config
I think you should try
<ion-view view-title="MyPage" class="has-header">
I came across same issue once. I used class="has-header" to root view that solved my problem.
Related
i've the the following problem with the header (toolbar) position in the roots pages:
Why the headers root pages are located above the tabs ? i need to put them within childs page.
the code is so simply:
tabs.html
<ion-tabs tabsPlacement="top" tabsLayout="icon-bottom" tabsHighlight=true>
<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>
tab1Root (home.html)
<ion-header>
<ion-toolbar>
<div >
<small>
this is the toolbar ...
</small>
</div>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
</ion-content>
thanks.
Because you have placed the <ion-toolbar> within an <ion-header> which will position it at the top (header) of the screen. Please see the Ionic Toolbar docs.
Try placing it within <ion-content> instead.
<ion-content>
<ion-toolbar>
<ion-title>this is the toolbar ...</ion-title>
</ion-toolbar>
</ion-content>
i have created new app with tabs. i want a header bar below tabs. how to get it?
even if i get a div which displays content below tabs its fine.
the hide div is in the child page of tab i wanted to keep in a different page and add it below tabs so that it appears in all the pages
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Live View" icon-off="ion-ios-speedometer" icon-on="ion-ios-speedometer" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Statistics" icon-off="ion-stats-bars" icon-on="ion-stats-bars" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
<ion-tab title="Home" icon-off="ion-ios-home" icon-on="ion-ios-home" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
<ion-tab title="Service" icon-off="ion-clipboard" icon-on="ion-clipboard" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-chatbox-working" icon-on="ion-chatbox-working" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
</ion-tabs>
<!--<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div id="divslide" ng-hide="myCheck"></div>-->
<!--<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div id="divslide" ng-hide="myCheck"></div>-->
<ion-view view-title="Dashboard">
<ion-content class="padding">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div id="divslide" ng-hide="myCheck"></div>
<h2>Welcome to Ionic</h2>
<p>
This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the Ionic Market.
</p>
<p>
To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
</p>
<p>
If you need help with your app, join the Ionic Community on the Ionic Forum. Make sure to follow us on Twitter to get important updates and announcements for Ionic developers.
</p>
<p>
For help sending push notifications, join the Ionic Platform and check out Ionic Push. We also have other services available.
</p>
</ion-content>
</ion-view>
i figured it out the solution.
just add a peace of code in index file
</ion-nav-bar>
<ion-nav-bar class="has-tabs">
<div class="bar-stable bar-subheader no-tap-scroll" id="divslide"></div>
</ion-nav-bar>
thais it... it works..
I'm creating an app using Ionic 1.3.2, and I have one step when user choose your login type, from facebook or from app, after the user make your login it will redirect to other step when has a <ion-side-menus> and the user can use the app. The problem is I created the first step (choose login) with <ion-nav-bar> and in second step (side-menus) also has <ion-nav-bar> on content of <ion-side-menus> and the header of first step seems override the header of second step bugging the layout, I want to use the same header on both steps.
My question is, how could I use only one header, in that case header created on first step, and the second step use this header too ?
My scene is like below.
index.html (first step)
<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">
<!-- The nav bar that will be updated as we navigate-->
<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">
</ion-nav-bar>
<!-- where the initial view template will be rendered -->
<ion-nav-view></ion-nav-view>
</body>
main.html (first step, where user choose your login type)
<ion-view view-title="MeuPedido" align-title="center">
<ion-content>
<div class="principal">
<a class="button button-block button-positive" ng-click="fbLogin();">Login com Facebook</a>
<button class="button button-block button-energized" ng-click="goTo('login');">
Entrar
</button>
<button class="button button-block button-energized" ng-click="goTo('addUsuario');">
Cadastrar
</button>
</div>
</ion-content>
</ion-view>
sidemenu.html (second step, after user make his login)
<ion-side-menus ng-controller='CtrlSideMenu' data-ng-init="loadImage();">
<!-- Center content -->
<ion-side-menu-content>
<!--app has header on index.html -->
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left" class="has-header">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="tabsContent"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar>
<div>
<div class="row">
<div class="col col-90 text-center">
<img ng-src="{{imageURL}}" class="round_image">
</div>
</div>
<div class="row">
<div class="col col-90 text-center customTitle">{{nome}}</div>
</div>
</div>
</ion-header-bar>
<ion-content style="margin-top:200px;">
<ion-list>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<h6>Desenvolvido por Iguana Sistemas</h6>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
here image of first step, look at in this point has header
here image of second step, note that header of first step is overriding header inside ion-side-menus and bugging the layout.
I don't really get what you want to achieve, but side menu is one thing (it controls the view that appears when you open the side menu)and the the main view is another - is the view that user will see and from here you can open side-menu. you can have different nav bars for this 2 views. but from your code it looks like you have 1 main view that logs in the user and then changes itself to display the feed and a side-menu.
you multiple options: 1. make the title and color of the nav bar variable and change them with angular. 2. create another view for second step and override the nav bar.
You should have a structure something like this: -> main view(login) ->second view(feed) that also has a side menu
I just started using Ionic with Angular for a project. So this might be a beginners mistake.
So I made an html file with a header, tabs and a list inside a tab. Now I do get the problem that the first item of the list disappears after the header.
I'm trying to achieve this with the following code:
<ion-header-bar class="bar-default">
<h1 class="title">Test</h1>
</ion-header-bar>
<ion-tabs class="tabs-default tabs-striped">
<ion-tab title="Rooms">
<ion-content class="scroll-content ionic-scroll has-header">
<ion-list>
<ion-item ng-repeat="room in Rooms">
{{ room.Name }}
</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="Another tab"></ion-tab>
<ion-tab title="Another tab"></ion-tab>
</ion-tabs>
This does give me a header, a list and tabs. But like I said, the first item disappears after the header.
I noticed if I put the <ion-content><ion-list>..</ion-list></ion-content> outside of the tabs content, it does actually work like it should. But according to the documentation you can place the content inside of the ion-tab tag.
ion-tabs contains a set of ion-tab but ion-tab directive requires you to include a ion-nav-view inside each tab.
You won't find this in the documentation.
Your html would look like this:
<body ng-app="app">
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-tabs class="tabs-default tabs-striped tabs-top">
<ion-tab title="Rooms">
<ion-nav-view>
<ion-content ng-controller="mainCtrl">
<ion-list>
<ion-item ng-repeat="room in Rooms">
{{ room.Name }}
</ion-item>
</ion-list>
</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="Another tab">
<ion-nav-view>
<ion-content>AAA</ion-content>
</ion-nav-view>
</ion-tab>
<ion-tab title="Another tab">
<ion-nav-view>
<ion-content>BBB</ion-content>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</body>
I've used the class tabs-top for the ion-tabs directive but you can change it the way you prefer.
Notice that I've placed a <ion-nav-view> inside each <ion-tab>.
That's the place where your content will be loaded by the framework.
It's tricky but it becomes obvious when you start playing with routes and each tab content is loaded from other views.
If you want to see how it works you can check this.
I've got this strange behaviour.
In my index.html I declared:
<body>
<ion-nav-view></ion-nav-view>
</body>
Then in my page.html I used the followin markup:
<ion-view title="Purchases" hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content> ... </ion-content>
</ion-view>
The view correctly set a button to toggle side menu, but also, automatically, create a header:
<ion-nav-bar class="bar-stable nav-title-slide-ios7 bar bar-header nav-bar disable-user-behavior">
How can I change its styles? For instance: I would like to set it as a "bar-energized".
I also tried to insert, in index.html above , the following markup (amany examples show), but it does not seem to work (nav bar header remains grey):
<ion-nav-bar class="bar-energized nav-title-slide-ios7"></ion-nav-bar>
The only way it seems working is by declaring and buttons inside each and every
Just realized it was really a newbie question! I was starting from a Ionic sidemenu template, and the misterious "bar-stable" was declared inside "ion-pane ion-side-menu-content" in my menu.html file.
Hope it may helps someone other!