CODEWITHSUNDEEP
androidhtmlcsswebview
aliry
aliry

Reputation: 822

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>

Upvotes: 4

Views: 5733

Answers (1)

Johan Nordberg
Johan Nordberg

Reputation: 3777

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;.

Upvotes: 8

Related Questions