[bug] Beta 14 Nav Button Alignment

1

In the sample code below, beta 13 displays the two icons right justified on the nav bar. In beta 14 the first button stays in the same position (one icon space indented from the right) but the second icon now appears beneath the first icon rather than to its right.

 <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-trash-a" ng-click="deleteEmergencyContact()"></button>
    <button class="button button-icon icon ion-edit" ng-click="modifyEmergencyContact()"></button>
  </ion-nav-buttons>
2

Buttons still display correctly in CordovaSim (from JBoss Developer Studio) skinned as Samsung Galaxy SIII. However, I’m not sure how accurate this can be relied on as back button is displayed as “< Back” on simulator but as “<-” on actual android device.

Icons have vertical alignment on Samsung Galaxy Note 2014 (tablet) and Sony Xperia Z1 Compact (phone).

3

Hmm, would you be able to recreate this in a codepen?
I jus tried this on my android device using the two buttons you provided and they displayed fine for me.

4

Never done a code pen before but willing to give it a try. Would have thought if it was OK in CordovaSim it would also be OK in code pen?

If you like I could send you the apk via mail?

I though it would be across all android devices given it affects both of mine (one a tablet and one a phone) identically. Samsung tablet is android 4.4.2 and Sony phone is android 4.4.4

5

Here’s a partial screen capture from the Sony Xperia Z1 Compact running android 4.4.4

image
IconIssue.png720×198 9.01 KB

6

Well I can took the codepen and make an app from it.

An apk won’t be enough, it’s like saying someone made a cake and it came out bad: How can I go back and fix it :wink:

Hmm, never used cordova-slim/jboss before.
Have you seen this in a full cordova app?

7

ahh Hmm, it could be an issue actually with the nav-title…

Can you try a shorter title and see if it resolves the issue?

8

Tried a shorter title and it made no difference.

The reason for suggesting sending the apk was to see how it behaved on another device. If it was OK then implies something causing the problem on my two devices. If similar issue on your device then something different between the way I’ve written the app and your test code. Given this is my first Ionic app I could well be doing something wrong. However, the same code worked fine under beta 13, it’s only broken after I upgraded to beta 14.

CordovaSim is part of the mobile development toolset in JBoss Developer Studio. I was using myEclipse from Genuitec for my previous prototype based on jqm, but switched to JBoss Developer because it had better support for Ionic. JBoss developer seems to be more aligned with Cordova, whereas myEclipse aligns with PhoneGap.

Not sure what you meant by “Have you seen this in a full cordova app?”

I will continue with trying to put together a codepen.

9

I’ve put together a codepen containing the related code from my application. As expected it works correctly. I suspect that this is only going to be a problem on certain devices and probably not related to screen size as my two devices it is failing on (tablet/phone) have significantly different screen sizes but related iPad / iPhone work correctly.

The android phone (Sony Xperia Z1 Compact) also has device specific issues with detecting tap-hold events which I have raised on another post in the forum. The tablet and all other devices process the tap-hold successfully, but the android phone fails to recognise a tap-hold 95% of the time.

Have any other developers come across button layout issues new to beta-14 on android devices?

10

Fired up an old HTC Desire HD running android 2.3.5 and everything works fine. Perhaps an issue with android 4.4.x which the two failing devices have in common?

What version of Android were you running on the device you tested your code against?

How significant were the changes in beta-14 in areas that might possibly affect this?

11

I will look at the codepen, but I don’t have a xperia z1 so I’ll have to use another 4.1 device or a nexus 5.

Didn’t know if cordova-slim was a fork of cordova or something.

Can you try to create a project form the CLI without importing it into eclipse and see if it’s something to do with the JBoss?

As far as the changes in beta 14, we haven’t changed too much for the buttons.
But from the codepen, again it looks like the title and the back button’s text are very long, which could have an impact on the buttons.

If the devices are 4.4, you should be able to remove debug everything in chrome and see if anything is throwing off the buttons.

12

I will look at the codepen, but I don’t have a xperia z1 so I’ll have to use another 4.1 device or a nexus 5.

The Xperia phone is 4.4.4 and the Galaxy Tablet is 4.4.2

Didn’t know if cordova-slim was a fork of cordova or something.

It’s “CordovaSim” not “cordova-slim” and is just a browser based simulator provided in the JBoss Development Studio. MyEclipse contains something similar. i.e., it is just a simulator for testing and has nothing to do with the compiled apk etc.

Can you try to create a project form the CLI without importing it into eclipse and see if it’s something to do with the JBoss?

The apk is actually built using PhoneGap CLI “phonegap remote build android” and was created outside eclipse using the Ionic CLI and side-menu template. I’m just using Eclipse for editing convenience.

As far as the changes in beta 14, we haven’t changed too much for the buttons.
But from the codepen, again it looks like the title and the back button’s text are very long, which could have an impact on the buttons.

I thought you were make a number of “platform specific changes”; perhaps that is related. I changed the title to simple “Title” and it made no difference. Issue also occurs on tablet in landscape mode where there is plenty of room on the nav bar. Also works fine on iPhone 6 and HTC Desire with similar form factors to the Xperia phone.

If the devices are 4.4, you should be able to remove debug everything in chrome and see if anything is throwing off the buttons.

I have thought about using GapDebug (from Genuitec) to look into it and also the issue of tap-hold not being recognised most of the time on the Xperia phone. However, my CSS,HTML, and JS skills are quite rudimentary (I’m a Java / Scala developer normally in stand alone applications) so I’m not sure how effective I will be?

One other useful option might be if you could send me the apk you used to successfully test on your device. If it also works on my devices then there must be some anomaly in my code. If it fails on my devices then it looks almost certain that there are some device specific issues.

13

Dug out an even older Galaxy Tab 10.1 (original) running Cyanogenmod 10.1 (android 4.2.2) and everything works fine on this device too.

So just the Samsung Galaxy Tab 10.1 2014 Edition and the Sony Xperia Z1 Compact that have problems.

14

Have you found a solution for this issue? I have the same problem on a Samsung Galaxy S4.

15

Mike Hartington had a look into it on my Galaxy Note 10.1 over the network but wasn’t able to find anything conclusive. He suggested looking into using Crosswalk Crosswalk Integration Beta in Ionic CLI (v1.3.2) which worked for me. Resolved the issue on both devices. Downside is bigger APK and can’t be built using PhoneGap build. Many positives though.

Someone was going to look into it but given it was only two devices affected, it probably wouldn’t receive much focus given Crosswalk appears to be the strategic direction anyway.

Perhaps knowing it affects another major device they might investigate; particularly as it used to work in beta 13.

16

Also happens on the S5 with Android 5.

Will look into crosswalk as well. Thanks for the info!

17

I have the same problem in Android 4.4.2.
I phone is an Archos 45c premium

18

This error occurs in xperia zr device also!!