I would like to use the logo of my app inside the header element on every single view.
So the first question is if ionic support this kind of stuff. If so, how should I pass the img tag to the view. And which dimensions you recommend to the logo, so it would look neat inside an iPhone header, or should I control the height of the logo with CSS (something like header img { max-height: 100% })
The logo is on my header now. But now I have this problem, I was able to keep the logo height proportional to the header’s height with the CSS rule “max-height:100%”. If I test this on any browser, the logo height stays true to this configuration, but when I check this with de “cordova emulate ios”, the logo exceeds the header and invades the other content area.
So I was thinking about using a logo with the exact dimensions of a iPhone header, but I don’t know which are these dimensions, specifically the height.
Anyone knows how to fix this logo height issue? Thanks in advance,
hey,
I stumbled over this discussion because we are also looking for a way to show an image inside the header element. After trying this approach and ar a short look into the ionic source code I realized that the suggested approach isn’t up to date any any more. At least since Ionic Beta4 you can set the image tag in the title attribute of the ionicView directive directly. Like <ion-view title='<img class="title-image" src="images/kidsintouchtext.png" />'>
Works fine for png but can’t get it to work for svg.
<ion-view title=‘<object class="title-image" type="image/svg+xml" data="img/OFF_header.svg" width="100%" height="100%"></object>’>
It’s works, but it has a bug with Back button.
On enough large screen it’ll show the logo (not correctly vertical centred) instead the classic title view string.
Have you find a solution using something similar to this?
I’m not exactly sure the best way to implement this…Are you just putting the image tag and title text in the header? Is there a way to template the image into the header so that I don’t have to add it each time?
Well, according to here, its done as below (just remove the ng-click if you don’t want an event to be there":
*make sure its not within a div. Just read the link. All information is there
<ion-view>
<ion-nav-buttons side="primary">
<button class="button" ng-click="doSomething()">
I'm a button on the primary of the navbar!
</button>
</ion-nav-buttons>
</ion-view>