Col-center: align-self doesn't work on Android 4.1

ionic-v1
1

I have a simple app built with Ionic.
Here is the view code:

<ion-view title="Main Window">
	<ion-content scroll="false">
		<div class = "row bg-white" id="header">
			<div class = "col col-20 col-bottom">
				<img class="main-header" src="img/close_btn.png" />
				<img class="main-header" src="img/fivestars_logo.png" />
			</div>
			
			<div class = "col col-45 col-center text-left">
				<div class = "user-name">
				{{user.name}}
				</div>
				<div class = "user-note">
				{{user.note}}
				</div>
			</div>
			
			<div class = "col col-20 col-center text-right">
				<div class = "user-pts col-center">
				{{user.points}} pts
				</div>
			</div>
			
			<div class = "col col-20 col-center text-center">
				<button class="button button-save">Save</button>
			</div>
		</div>
	</ion-content>
 </ion-view>

This works pretty good on IPad and Desktop, all columns are vertically center aligned like the given examples. But when I put it on my Android tablet, which is a Google Nexus 7 first generation with 4.1, this “col-center” just acts as it’s invalid property.

I took further look into col-center, it uses the “align-self” attribute, which is supposed to be supported by Android 2.1+

Can anyone help? Please let me know any other information I should provide.
Thanks!

1 Like
2

Stumbled on this one too, and just found out that if you apply a global alignment rule to the row (row-center for example) then it works. Specific column alignment doesn’t.

I’ve tested this on:

  • [Works as expected] Moto G @ 4.4.2
  • [Works as expected] Nexus 4 @ 4.4.2
  • [Doesn’t work] Galaxy Nexus @ 4.3
3

One more test:

  • [Doesn’t work] Galaxy SII @ 4.0.3
4

Same problem. Doesn’t work with Galaxy SIII @ 4.3

EDIT: Doesn’t work either on Wolfgang AT-AS45q2 @ 4.2.1