Posted under Ionic
Permalink
Tags Gotcha, Tip
I wanted to try showing a centered title with a back button on the left, in the NavBar.
I tried various ways of doing this with css hacks, using floated <h1> and <div> combinations, but could not get it all to line up correctly.
The correct way is just to include an <ion-title> in the NavBar, as follows. This can be centred via the text-center attribute.
<ion-header>
<ion-navbar>
<ion-title text-wrap>
{{place.localisedName}}
</ion-title>
</ion-navbar>
</ion-header>
Whilst text-center worked correctly in the title, note that text-wrap did not and was ignored.
As I did not take this pattern any further (I decided not to use titles in the toolbars but to put titles immediately underneath) I did not investigate this further.
This highlights an important issue. Too much CSS hacking breaks the encapsulation of the CSS model used by Ionic/Angular which is a bad thing – other things are in danger of breaking even if it does work initially.
it is obviously better to go with the tools/tags provided and investigate this way thoroughly first for a solution – in this case I did not and initially went down a blind alley which took time as well as being a suboptimal approach which did not work and broke encapsulation.
Leave a Reply
You must be logged in to post a comment.