CODEWITHSUNDEEP
htmlcssjquery-mobileborder-layout
Scott
Scott

Reputation: 3967

jQuery Mobile - How to place a solid border round the page

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?

App with border

Upvotes: 0

Views: 4587

Answers (3)

kaiser
kaiser

Reputation: 22333

Easy: 

<div data-role="page" id="some_page">
    <div data-role="content" class="ui-content" id="main_content">
        <div class="ui-corner-all ui-shadow" style="padding: 1em;">
        </div>
    </div>
</div>

Upvotes: 0

user235273
user235273

Reputation:

You can override the .ui-page class

.ui-page {
    border: 0;
}

to something like:

.ui-page { border: 2px solid red; }

Upvotes: 0

Scott
Scott

Reputation: 3967

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.

Upvotes: 2

Related Questions