Problem with overflow-x and border-radius in android app

Problem with overflow-x and border-radius in android app

  

[outsystems ver 10.0.611.0]


We are having a problem when displaying a container inside a Upload widget in android.

In iphone and web emulation it appears as expected.

iphone

web_emulation



But in android the element is not inside the border-radius

I used Chrome dev tools using to investigate the problem

I found out that if you disable overflow-x rule it will look the same with android display

What should I do to solve the problem? It seems like android ignores overflow property.

Solution

Hi Jordan,

Yep, it seems android ignores that property:

https://github.com/facebook/react-native/issues/3198

I haven't checked the whole post for a solution. Maybe there is one there...

One thing that I remember... Can you do the same round corners also in that container?

Cheers,

José

Solution

Thank you for the response, yes I can do the round corners on those 3 elements

I think I've solved the problem, I just added zIndex values to the parent container ( label[data-upload] ) and sibling ( img[data-image] )