Android 4.4.4 alignment issues with Ionic apps

bradmartin · February 11, 2015, 3:16pm

The images below show the problem, everything is fine testing in Chrome on desktop and was fine until I upgraded the Galaxy S5 to Android 4.4.4. The last picture is from BuzzUp which @siddhartha built and their is another thread about it on the forums here: BuzzUp built with Ionic -- Material design

I informed the developer of the issue and then I installed the sidemenu starter project and the elements in the are not aligned correctly. In the first image is the same code running on Chrome (Desktop) and the I’ve only added one custom css rule for [ .bar .title ] to use a font and increase the font-size.

Is anyone else seeing this issue on Android 4.4.4 devices?

emily · February 16, 2015, 2:29am

I’m definitely having issues with this as well. I’m currently using beta-14, I’m going to step back to beta-13 and see if there’s still issues there. I haven’t noticed any issues with any iOS versions or differences between testing on devices vs. emulators.

After noticing problems while testing my app, I went back and tested the sidemenu and tabs starter apps and I’ve noticed the same issues:

Nav bar titles are not centered in any 4.X version (I was able to test some 2.X devices and those were fine). This is what I get with the default starter app:

I’ve got some funky alignment issues with 4.4+, as seen here (image on the left is in Chrome, on the right is a 4.4.4 emulator):

@mhartington @max any thoughts on this?

bradmartin · February 16, 2015, 5:38pm

If I’m not mistaken your alignment issues are by design. Android titles are supposed to be shifted to the left, iOS aligns to the center. My issue is how the title is slightly shifted up. No matter what font I use, I haven’t modified the starter projects but the titles in the navbar and the icons in button elements get shifted up as seen in the images I posted.

Let me know if you have another issue but I don’t think your alignment is a bug but rather an intended platform design.
@emily

emily · February 16, 2015, 6:02pm

Yep, you’re definitely right for the nav bar! I still can’t figure out what’s wrong in the last image I posted though.

bradmartin · February 16, 2015, 6:49pm

Yeah… that’s a tough one. Can you install the .apk and use chrome://inspect to view the rendered markup and see if anything is out of place?

nurhadiab · February 27, 2015, 2:59am

Hi, I have the same issue with this. Is this issue already resolved?

emily · February 27, 2015, 4:17am

I wound up using chrome://inspect and didn’t find anything out of place. I redid my layout entirely using more columns instead of spans to fix my issue. Not sure about the original issue with icons/titles being shifted up though.

bradmartin · February 27, 2015, 7:11pm

I haven’t been able to resolve it. Mike at DriftCo and I were to do some screen sharing to see if he can see anything out of whack internally. Although i think it’s more an issue with the WebView on the device I’m using. Because other apps are effected also, I can’t be the only S5 user running 4.4.4 from ATT service with the issue. For instance in my original post you’ll notice the screenshot taken from BuzzUp (built by another Ionic dev) and the app was fine on my device prior to me upgrading to Android 4.4.4, after the upgrade (same app version from @siddhartha) the issue was present. So I’m thinking it’s the WebView on the device. When inspecting via chrome://inspect as @emily pointed out there wasn’t anything out of place or causing the issue for this particular bug. When I get time I’ll try to get with Mike and see if he has any idea on a fix.