Question

I’m building my first app with jQuery mobile and already stuck right out from the start. Below is a screen shot of what I’m after. I’ve blacked out the content.

How do I add a solid border round the frame that is persistent?

Answer 1

Solved it myself using:

.ui-mobile [data-role="page"] {
    box-sizing: border-box !important;
    border: 10px solid #e6e6e6 !important;
    height: 100% !important;
}
.ui-mobile [data-role="header"] {
    box-sizing: border-box !important;
    border: 10px solid #e6e6e6 !important;
    border-bottom: none !important;
}
.ui-mobile [data-role="footer"] {
    box-sizing: border-box !important;
    border: 10px solid #e6e6e6 !important;
    border-top: none !important;
}

and

<div data-role="page">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>Hello world</p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <h1>My Title</h1>
    </div><!-- /footer -->
</div><!-- /page -->

Not run into any issues doing this so far it wouldn’t surprise me if later on I run into issues with this code.