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>
Related
Consider a simple Ionic page's content:
<ion-content>
<ion-refresher slot="fixed">...</ion-refresher>
<div *ngFor="let item of items">
...
</div>
<ion-infinite-scroll>...</ion-infinite-scroll>
</ion-content>
I made a Stackblitz to demonstrate this page: https://stackblitz.com/edit/ionic-v4-angular-tabs-nbjk4k
Now I would like to add something with fixed position – let's say <div>Some content</div> – on the top or bottom of the page that is NOT within the ion-header or ion-footer section. Is it possible to fix that div to stick to the top or bottom?
The official advice I found on the Ionic docs and Github was to use slot="fixed" on any element that I would like to fix in the content area.
It somehow does not work for me, maybe there is a conflict with the slot="fixed" of the refresher component.
How can I achieve a fixed element?
Indeed there was an issue with slot="fixed",
Ionic team did some changes for that.
The content(div?) needs to be wrapped in a position:relative wrapper.
Use position:relative in the tag and it should do the thing.
For example - <div slot='fixed' style="position:relative">Some content</div>.
Follow this PR for more Info. Hope this helps!!
Link: https://github.com/ionic-team/ionic/issues/17754
There is a bug on slot="fixed". In order for you to make your desired output, you need to put style="position: relative" as per the discussion above.
I created a simple sample for you below:
<ion-content>
<div slot='fixed' style="position:relative">Some content</div>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<div *ngFor="let item of items; let i=index;" class="item">
Item {{i}}: {{ item }}
</div>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
I want to be able to have a logo and a title in the header of my app. Currently, my app is organised this way :
index.html that wraps the other views :
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable headerBar">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view>
</ion-nav-view>
</body>
And I have my tabs with ion-view. Before modifications, I had the parameter view-title for each tab and align-tile center in the index, and I had a title in the center of the header, but I want to have a logo on the left, and the title on the center. So what I did was this :
<ion-nav-title>
<img src='img/helpro.png' class="title-image"/> {{ 'devices' | translate }}
</ion-nav-title>
But this way, I have the logo with the text in the left too. How can I do to have the logo on the left, and the title on the center ? I tried to have the tag nav-title and the parameter view-title, but nav-title override the view-title. If I do align-title center it takes both.
This is my current page :
Thanks !
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 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.
I am learning how to use HTML and css, and want to add a shopping cart at the right side just below the
menu1, menu2, menu3, menu 4 bar, but do not know how to do it, I was trying to do a .description definition in the css but had no luck I have a simulation of this, of course i cant upload images which are in images folder...
http://cssizer.com/build/preview/wzNqVAyI
and here is the source
http://cssizer.com/JKQLGFIM
So I am trying to make the description definition appear just below the menu bar and after that an image of a shopping cart , but do not know how to define it well, How should I modify the code to get something like this
instead of
If you want to add a cart icon on the right side of your website, Hear are the html codes.
<div id="head">
<div id="head-one">
<h1>TOM TOC</h1>
<h2>Slogan de </h2></div>
<div id="head-two"><img src="http://c.dryicons.com/images/icon_sets/stickers_icon_set/png/64x64/shopping_cart.png" /></div>
<div class="clear"></div>
</div>
Hear are the css codes.
#head-one{float:left; width:700px;}
#head-two{float:right; width:70px;}
.clear{clear:both;}
Guess it helps you.
hi now add overflow:hidden in your #nav id
as like this
#nav{
overflow:hidden;
}
*result is*