Skip to main content

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>


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

Popular posts from this blog

JPA 2 new feature @ElementCollection explained

@ElementCollection is new annotation introduced in JPA 2.0, This will help us get rid of One-Many and Many-One shitty syntax.

Example 1: Stores list of Strings in an Entity

public class Users implements Serializable {

    private static final long serialVersionUID = 1L;
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    private List<String> certifications = new ArrayList<String>();

    public Long getId() {
        return id;

    public void setId(Long id) { = id;

    public List<String> getCertifications() {
        return certifications;

    public void setCertifications(List<String> certifications) {
        this.certifications = certifications;

        Users u = new Users();
        u.getCertifications().add("Sun Certified Java Programmer");

Generated Tables

Column --> ID
    Row             1


ArrayList vs LinkedList vs HashSet Performance Comparision

ConclusionsInserting & Reading sequentially from Collection prefer LinkedList/ArrayListInserting & Reading/Deleting by Search/equals from Collection prefer HashSetInserting, ArrayList & LinkedList performs best while HashSet takes double the timeReading, HashSet performs best while ArrayList & LinkedList are marginally lessDeleting, HashSet performs 10 times better than ArrayList & ArrayList performs 4 times better than LinkedList. LinkedList is slow because of sequencial search Bottom line : unless you are not going to iterate using for(Integer i : list ) then prefer HashSet
Inserting/Reading/Deleting integer's from zero till countJDK7Collectionactioncounttime msArrayListInsert1000/1LinkedListInsert1000/1HashSetInsert1000/1ArrayListInsert100005LinkedListInsert100004HashSetInsert100007ArrayListInsert10000011LinkedListInsert10000011HashSetInsert10000021ArrayListGet/Read1000LinkedListGet/Read1000HashSetGet/Read1000ArrayListGet/Read100004LinkedListGet/Read100003Has…