CSS Flex box on form labels not working properly on Android 4.3

[rvanbaalen]

I'm using a Galaxy S4 and this is the result in all my forms:

I am still digging around the CSS flexbox specification to see where the shit hits the fan but I can't find anything so far. According to http://caniuse.com/flexbox there is 'limited support' for this feature in Android 4.3 but I can't really find out what that means.

Anyone else experiencing this issue?

[adamdbradley]

I know there were syntax changes overtime, which is why this ugliness exists:
https://github.com/driftyco/ionic/blob/master/scss/_mixins.scss#L488

But it could be that the input's css isn't correct, or else I'd imagine there would may many more issues with Android css in general. Thanks for reporting this.

[rvanbaalen]

Are you planning on looking into it? Forms on Android 4.3 (Galaxy S4)
are no use now due to the dynamic label width as shown in the
screenshot.

[adamdbradley]

Yes I plan on looking into it, but at the time of writing this there are more pressing issues that need closing. But we'd also love to have your assistance in solving this issue, so please feel free to debug it and submit a pull request. Thanks.

[rvanbaalen]

I sure will and am looking into it as we speak but it seems we both
have our hands full. I pushed for the use of Ionic in our clients
project but due to the intense developments of the last few weeks and
its breaking changes or newly found bugs, I'm behind schedule so I
need to both help you guys fix the issues and at the same time finish
the project ;-)

Lets stop the chit chatting and get to work. I'll keep you posted in
this thread if I find anything useful.

[rvanbaalen]

@adamdbradley I've been doing some research today and it's rather hard to exactly reproduce the issue in for example CodePen.

What I can reproduce is this:

Open the codepen on Android 4.3: http://codepen.io/biinjo/pen/cHCsp
The result is that the labels are all having a fixed with causing some of the labels to overlay the actual input.

[rvanbaalen]

Since flexbox still isn't a final CSS feature, wouldn't it be better to go for a solid solution like floating labels?
I know it isn't as pretty but at least it works cross platform.

Update;
Didn't check yet if it makes any difference but I found a pretty extensive flexbox mixin here:
https://github.com/ultimatedelman/sass-flexbox-mixin/blob/master/flexbox.scss

[adamdbradley]

Ok, the real culprit here is the lack of flex-basis support in older Android. The fix I just committed didn't do the trick yet, I'm still working on it.

[adamdbradley]

False alarm, looks like the fix is working for me. I've tested it on desktop chrome, Android 4.2, Android 2.3 and iOS7. Would you be able to check it out and let me know if you see any issues? Thanks.

[rvanbaalen]

Will do in a couple of hours. Ill keep you posted.

[rvanbaalen]

Cant confirm the fix for Android 4.3 (Galaxy S4) unfortunately :(

[adamdbradley]

Bummer because it's working on Android 2.3, Android 4.0, Android 4.2 and Android 4.4. Strange that 4.3 doesn't work. I'll try to get my hands on a Samsung S4 and see if I can some up with a fix. Thanks.

[adamdbradley]

It also works in Android 4.3 emulator.

[rvanbaalen]

This smells more and more like a local issue on my end. I'll try to do some more research this week.

[tlancina]

Hey just to chime in, labels are working fine on my Galaxy S3 running 4.3. Maybe it's an S4 issue?

[rvanbaalen]

@adamdbradley Yes! It's working. Like always, your work is again super appreciated.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.