Wednesday, August 17, 2011

JQuery Mobile Split Screen 20-80 hack

Use JQuery Mobile's Grid Layout and just override "width" on "ui-block-a" and "ui-block-b" to split screen as per your need.

Tested on : iPad, iPhone, and PC

Below is fully functional page, you can download and open it in a browser to see the live demo. 

<!DOCTYPE html>
        <meta http-equiv="Content-Type" content="text/html; charset=MacRoman">
        <link rel="stylesheet" href="" />
        <script src=""></script>
        <script src=""></script>
        <div data-role="page" id="foo">
            <div data-role="header">
            <div data-role="content" >
                <div class="ui-grid-a">
                    <div class="ui-block-a" style="width:20%">
                        <div class="ui-bar ui-bar-e" style="padding-left:10%;float:left;width: 100%"> This occupies 20% </div>
                    <div class="ui-block-b" style="width:80%">
                        <div class="ui-bar ui-bar-b" style=" z-index: 10;position: absolute;width: 100%;padding-right: 10%">
                            This occupies 80%
            <div data-role="footer">
                <h4>Page Footer</h4>


CyberKatze said...


Cara said...

Thanks so much for this! You saved me from tearing my hair out!!

Anonymous said...


David Lucky said...

Dirty hacks.. I better use bootstrap