I am having issues with styling my android header after builds. The title is not aligned properly
But my web-based is aligned properly. Below is the output of ionic serce
I use:
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
And it works.
This is my code
<div class="bar bar-header bar-light"><a href="#/enter_home" class="button button-icon iconcolor icon ion-chevron-left"></a>
<div class="h1 title iconcolor">Header </div></div>
You can also use custom design like:
.center-block{
display:block;
margin-right:auto;
margin-left:auto;
}
it also works for my case. You can try.
Thanks for the reply.
I was wondering where to put the html snippet you posted? I am using the ion-view directive with a view-title attribute.
@IanDLC - can you put an icon in a button element and see if it shifts the text alignment inside the button?
I had this issue running on a Samsung Galaxy S5 awhile back and I never could pin it down and @mhartington was unable to reproduce, however your title alignment issue looks exactly like the issue I had on the device.
@motiurion I’ve tried what you suggested and only got it to align horizontally, not vertically. See attached photo
@bradmartin Is this what you were talking about? See the “edit” button at the bottom.
Also, I am working from a G3. Don’t know if that information is helpful.
If you provide some codesnip then it will be helpful.
I do it by vertically by padding:
padding: 5px
@IanDLC - Android 4.4.4 alignment issues with Ionic apps
If you view that post (mine) I attached screenshots from my app and from BUZZFEED (Ionic app by @siddhartha)…
I updated my S5 to 4.4.4 and began having the issues, Mike @ Ionic thought that it’s possible Samsung messed with something in the webview, he said they modify the default some if I recall correctly.
Unfortunately, my kid broke my S5 so I can’t test on it anymore. I think they’ve pushed it to Android 5.0 though since then so the issue may not exist on the S5 anymore, but the screenshots, specifically the navbar title being shifted is exactly what I experienced. There was no modification to the Ionic sidemenu project.No custom css or plugins. Just download via CLI and built the .apk for debugging.
@motiurion I just used what you suggested
<div class="bar bar-header">
<div class="h1 title">Header </div>
</div>
I’ll try that suggestion
@bradmartin I am using Android 5.0 right now. Could that be the issue?
My issue was on 4.4.4. I just checked my wife’s S5 with a default Ionic app and the issue isn’t present. It’s likely my issue was a bug in the webview on the S5, as @mhartington informed me Samsung modifies the Android webview and it has been known to cause issues in the past. So it could be unrelated. I would try adding crosswalk to your app, building the .apk and seeing if the issue still exists. Then you could potentially remove the webview factor out of the equation.
Try add the align-title=“center” attribute in your ion-nav-bar
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
It worked for me!
source: http://stackoverflow.com/questions/30005284/ionic-nav-bar-title-is-not-centered-on-android-device
Rather than messing with CSS, I’d use tools which are already integrated.
.config(function($ionicConfigProvider) {
$ionicConfigProvider.platform.android.navBar.alignTitle('center');
})yes it works. thanks! it solves horizontally problem. but i did not find anything about vertical…
Hi all,
I’m aware this is an old thread, but did anyone get to the bottom of this and have a viable solution? (Not yet tried Crosswalk but would rather not if possible…)
I’m getting the same issue in Android 5.1.1 (Samsung Galaxy S6) where navbar title vertical alignment is off, and also the same on buttons.
It looks fine in the web view, just not after deploying to the phone.
Simon
I know this thread has been dead a while now, but just wondering if anyone found a solution for this?
I have the exact same problem, button text and header text is all vertically shifted slightly, but only on android.
I’m using a OnePlus 2 with the latest version of Googles Android System WebView.