jQuery Mobile page overrides desktop HTML div layout

Posted by batjko on Stack Overflow See other posts from Stack Overflow or by batjko
Published on 2014-06-03T09:21:18Z Indexed on 2014/06/03 9:24 UTC
Read the original article Hit count: 183

Filed under:
|
|
|

I'd like to use jQuery mobile on my desktop page. I'm probably thinking of this wrongly, but I tried simply inserting a page element into an existing standard div, like this:

<body>
    <div id="left_sidebar"> [...] </div>

    <div id="mylist" data-role="page">
        <div data-role="listview"> [list items bla bla] </div>
    </div>

    <div id="right_sidebar"> [...] </div>
    <div id="site_footer"> (c) bla blub </div>
</body>

...hoping that only the middle part displays the "mobile" page elements. However, that page div seems to override the entire site and turns the whole body into a mobile page (albeit displaying my listview item nicely... across the entire screen).

Any idea what to do?

Advice is much appreciated.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery