I am using ion-list-header. It has the following style:
padding-inline-start: calc(var(–ion-safe-area-left, 0) + 16px);
But it is not supported on my Android 8 device’s WebView. Is there any workaround for this?
Thanks.
I am using ion-list-header. It has the following style:
padding-inline-start: calc(var(–ion-safe-area-left, 0) + 16px);
But it is not supported on my Android 8 device’s WebView. Is there any workaround for this?
Thanks.
Just to be sure, you have the text nested within an ion-label
in that ion-list-header
? I did notice in my own work that the styling is tied to a nested ion-label class
Hmmm…I would have to imagine var
is supported in your version of WebView considering it is used throughout the Ionic Framework for default styling as well. It is supported as of version 50 of WebView Android (reference).
With that said, a few days ago I tried using calc
and var
together but couldn’t get it to work either even though it should be possible from the example here. If it wasn’t, you should be seeing all sorts of issues.
I would verify you are styling the right element as @jjdev mentioned and check DevTools to make sure it is at least showing up in the styles. You can expect an Android device connected to your computer in Chrome by going to this URL - chrome://inspect/#devices.
I examined again. It is the padding-inline-start css that is not supported on my phone’s Chrome 58.