Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webview does not support flex box on Android Jellybean

I have a webview that loads a webpage which includes a flex box. The flex box Div displays correctly on Kitkat Emulator but its not working on older Android versions such as Jellybean. Boxes must be shown horizontally but they actually shown vertically.

Here is my HTML code:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>test</title>
</head>
    <body>
        <div style="display:flex; 
                                align-items: flex-start; 
                                justify-content: flex-start; 
                                flex-direction: row; 
                                flex-wrap: nowrap; 
                                width: 50%; height: 20%; 
                                background-color: red;">
            <div style="background-color: orange;">BOX 1</div>
            <div style="background-color: yellow;">BOX 2</div>
            <div style="background-color: green;">BOX 3</div>
        </div>
    </body>


</html>
like image 783
aliry Avatar asked Feb 15 '23 01:02

aliry


1 Answers

I think you need to prefix everything according to the old flex box spec, like -webkit-box-flex-foo: bar;.

For direction, you might need to use orient instead, like: -webkit-box-orient: vertical/horizontal;.

like image 76
Johan Nordberg Avatar answered Feb 23 '23 14:02

Johan Nordberg