I created a navigation bar using ionic-nav-bar. Added an h1 element with class title. But it's not displaying anything.
Here's my code
<ion-pane>
<ion-nav-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-nav-bar>
<ion-content>
</ion-content>
</ion-pane>
However, this is working:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
So what am i doing wrong?
<ion-nav-bar class="bar-positive">
<ion-nav-title>hello</ion-nav-title>
</ion-nav-bar>
This Will solve your problem.
That would be the html file of your view:
<ion-view title='My Title' class="dashboard">
<ion-content>
</ion-content>
</ion-view>
In your case you should wrap all that in an other ion-nav-view-element, because you are using the
ion-nav-bar-element.
The ion-nav-bar will be your navigation bar and you will have ion-views that will be plugged into the ion-content section. You would never want one title if you have a nav bar because the title should change as you navigate across ion-views. When you create you ion-view tag add a view-title attribute. Then when that view is active it will automatically update the header no h1 tag required.
The ion-header approach works because ion-header is designed to be a static and not dynamically update like a navigation header would.
The fact is that your
<h1>Test</h1>
tag is displayed but it is placed behind your <ion-nav-bar></ion-nav-bar>. As Anand suggested in answer above you should use <ion-nav-title>Test</ion-nav-title> to get expected result.
Hope this helps.
Related
I want to have a "Help Icon" button appear in the header bar of every nav-view in an Ionic project. To do that I included the following in my index.html page:
<ion-nav-view>
<ion-header-bar>
<div class="row">
<div class="col col-10 col-offset-90">
<div class="buttons">
<button class="button" ng-click="doSomthing()"><i class="ion-help-circled"></i></button>
</div>
</div>
</div>
</ion-header-bar>
</ion-nav-view>
The help button I want appears in every view as expected, but is not clickable. I'm guessing it has to do something with the layering of itself within the ion-nav-view?
Things I've tried:
Wrapping the button in an anchor
Removing the row and col placement
Note: I do have ion-header-bars in other views as well so I can show page titles. Would this affect the button at all? The button still appears but is not interactive anywhere.
Any help/comments as to why the button is not clickable is greatly appreciated.
EDIT:
So I have narrowed down my issue after more testing. The problem is with the following code in my index.html file:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
It seems as though this nav-bar overlaps the header bar. And this code is essential because of the "Back Button" implementation. Removing this code block returns the functionality of the Help Icon Button.
I figured out what I was doing wrong. ion-header-bar should not be used after the ion-nav-bar. Doing so caused it to be overlapped and not be interactive. Adding the button to the ion-nav-bar itself solved this issue. The following code works perfectly and displays the button on all views:
<ion-nav-bar>
<ion-nav-back-button>
<i class="icon ion-ios-arrow-left"></i>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<a ui-sref="url.path.tohelp" class="button icon ion-ios-help"></a>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
I'm new to Ionic. I have been trying to load several HTML files into the ion-slide. I already try out several solutions like this and this. Here is my code
<ion-view style="" title="Forum">
<ion-content class="has-header" padding="true" >
<ion-slide-box>
<ion-slide>
<h3 class="text-center">slide2</h3>
<ng-include src="'tes.html'"></ng-include>
</ion-slide>
<ion-slide>
<h3 class="text-center">slide3</h3
<ng-include src="'tes2.html'"></ng-include>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
The problem is that the page only shows the slide2 word and can be slide to slide3 but all of that slide do not content the HTML. The thing is that i'm still experimenting it on firefox browser. Is it because the browser or is there any special restriction for ng-include? Plunker
I want to put the app logo image on ionic header at center or left with vertical center align but its move to top in header.
Here following code I use to display this but issues get with this
<ion-view view-title="<img src='img/logo.png' width="44px" />">
Please help me to resolve this issue.
You can use <ion-nav-title>
Try this
<ion-view>
<ion-nav-title>
<img src="img/logo.png">
</ion-nav-title>
<ion-content>
//Your content here
</ion-content>
</ion-view>
I'm using ionic to build a hybrid app and I can't get the ui-view to dynamically show content
this is the index
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
</body>
for my understanding the ion-nav-view work just like the ui-view from angular ui-routing.
this is my app.js
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login',{
url: '/',
template: '<h1>hello</h1>'
})
$urlRouterProvider.otherwise('/');
})
I want the word hello to show when going to the root of the app but is not working. it's not showing anything and is not giving any console error.
I suspect the "hello" is there, but it's getting obscured by the <ion-header-bar>. Try adding "has-header" as a class to the <ion-nav-view> element. That class forces the content to begin 44px lower than usual, to account for the header bar.
Here is a working CodePen. All I did was add that class.
I created and ionic project using the command
ionic start sideMenu http://codepen.io/vialware/pen/ypoxd
I expected the app to be like what is shown below.
Nevertheless, when I run it something is missing, the menu button. It is being created I guess using in the header using this tag:
<ion-view title="'Welcome'" hide-back-button="true" left-buttons="menuButton">
I'm able to build and emulate the project without any errors and so I'm wondering whether I might have done something wrong and if anyone might have a hint on how to solve this problem (I'm new to both Ionic and AngularJS).
You can also use this :
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Title!</h1>
</ion-header-bar>
But don't forgot to put has-header to your content or your content will be behind this header bar
<ion-content class="has-header">
// Content
</ion-content>
In order to have that specific header, here's what your code should look like:
<div class="bar bar-header bar-positive">
<button class="button icon ion-navicon"></button>
<h1 class="title">Welcome</h1>
</div>
Note that the bar-positive class is only setting the blue color background on the header.
In my case, the change I made is, added attribute enable-menu-with-back-views="true" as below. Then sidemenu button and content is shown in all views.
<ion-side-menus enable-menu-with-back-views="true">
Please refer below link:
http://ionicframework.com/docs/api/directive/menuClose/
How are you running your app? If you are just opening your index.html plainly on a browser it most probably won't work... Try running it using localhost (local web server).
Assuming this is true... You need to turn IIS Server on and run your site there
If you don't know how, you can try this tutorials below.
http://www.iis.net/learn/install/installing-iis-7/installing-iis-on-windows-vista-and-windows-7- https://www.youtube.com/watch?v=dZAbdmPrU4g
HOPE THIS HELPS :)