ionic-team / ionic-docs

https://ionicframework.com/docs
Apache License 2.0
590 stars 3.03k forks source link

bug: Ion-checkbox justify property does not work on Android 12 (API 31) #3459

Open RoinSquallo opened 8 months ago

RoinSquallo commented 8 months ago

Describe the Bug

Ion-checkbox justify property does not work properly on Android 12 (API 31) I set justify="start" labelPlacement="end" and it works perfectly find with API 33 and above but when I tested with API 31 it acts weird.

Screenshot 0006-02-19 at 9 17 46

Expected Behavior

The view should be consistent between API version.

Screenshot 0006-02-19 at 9 19 06

Steps to Reproduce

Using ion-checkbox with said property and test in API 31 & 33 should reproduce this bug.

Screenshots

No response

Operating System

MacOS, Android studio

Browser

Chrome

Version

No response

Additional Information

"@angular/core": "^16.0.0", "@ionic/angular": "^7.0.0",

liamdebeasi commented 8 months ago

It's possible the device with API 31 is using an RTL text direction. In an RTL text direction justify="start" would pack the checkbox and label on the right side of container. Though that would mean the label appears to the left of the checkbox, not the right. It's possible there's a platform bug too. What version of Chromium are you using on the API 31 device? You can find this by logging window.navigator.userAgent when inspecting the app with Chrome Dev Tools.

RoinSquallo commented 8 months ago

This is the output of above command. 'Mozilla/5.0 (Linux; Android 12; sdk_gphone64_arm64 Build/SE1A.220203.002.A1; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/121.0.6167.178 Mobile Safari/537.36'

I am currently not using justify="start" labelPlacement="end" and do this as a workaround.

              <ion-checkbox 
              </ion-checkbox>
             <ion-label>{{item.name}}</ion-label>
jurakin commented 1 month ago

Does not work on API 30 too.