I wanted to try showing a centered title with a back button on the left, in the NavBar.<\/p>\n
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.<\/p>\n
The correct way is just to include an <ion-title> in the NavBar, as follows. This can be centred via the text-center attribute.<\/p>\n
\n<ion-header>\r\n <ion-navbar>\r\n <ion-title text-wrap>\r\n {{place.localisedName}}\r\n <\/ion-title>\r\n <\/ion-navbar>\r\n<\/ion-header><\/span><\/pre>\n<\/blockquote>\n <\/p>\n
Whilst text-center worked correctly in the title, note that text-wrap did not and was ignored.<\/p>\n
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.<\/p>\n
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 \u2013 other things are in danger of breaking even if it does work initially.<\/p>\n
it is obviously better to go with the tools\/tags provided and investigate this way thoroughly first for a solution \u2013 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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[200],"tags":[40,16],"_links":{"self":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1923"}],"collection":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1923"}],"version-history":[{"count":3,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1923\/revisions"}],"predecessor-version":[{"id":2174,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/1923\/revisions\/2174"}],"wp:attachment":[{"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salientsoft.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}