CSS margins using jquery-mobile

Asked

Viewed 98 times

0

I’m not able to create margins using css on an html page using jquery-mobile when the header and footer is data-position="fixed".

My example: http://jsfiddle.net/z2z7zjvL/ 

.ui-header, .ui-footer, .ui-content {
    margin-right: 25px;
    margin-left: 25px;
}
<body>

<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>My header</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>Content goes here..</p>
  </div>

  <div data-role="footer" data-position="fixed">
    <h1>My footer</h1>
  </div>
</div> 

</body>

How to solve this when I need the header and footer to be fixed?

css jquery-mobile

  • Is that what you’re looking to do? http://jsfiddle.net/z2z7zjvL/3/ on this link you will find more references: http://demos.jquerymobile.com/1.2.1/docs/toolbars/bars-fixed.html

  • I don’t know if you’ve noticed but the right margin isn’t working properly. That’s the problem I can’t find a solution to.

1 answer

-1

Make sure it works for you:

<style>
.ui-header, .ui-footer {
    margin: 0px auto;
    padding: 20px;
}

.ui-content {
  margin: 20px;
}
</style>

<body>

<div data-role="page">
  <div data-role="header" data-position="fixed" data-fullscreen="true">
    <h1>My header</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p> <p>Content goes here..</p>
  </div>

  <div data-role="footer" data-position="fixed" data-fullscreen="true">
    <h1>My footer</h1>
  </div>
</div> 

</body>

</html>

Browser other questions tagged css jquery-mobile

You are not signed in. Login or sign up in order to post.