Home/ Questions/Q 7550669
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T10:16:23+00:00

It’s amazing how fast you start using this framework, but i’m stuck on one

  • 0

It’s amazing how fast you start using this framework, but i’m stuck on one seemingly obvious thing. In all the layouts i’ve seen, including Theme Roller, there is a lovely padding on all elements. for some bizarre reason, in the entire documentation, nothing is mentioned about creating this much needed space between the UI and the viewport.

How does one define this?

In HTML Desktop it would be as simple as 

body{margin:20px}

Any help would be greatly appreciated.

To be sure, i even downloaded the default setting found on Theme Roller, and nothing happens.

I wonder doesn’t jQuery mobile have documentation on all the individual classes? Or at least list the different classes on a page somewhere so one can use them?

Below i added an example of what i mean. It’s actually form jQuery Mobiles own docs.
What makes things even more confusing is that the button renders with the button having padding, but not the menu.

To clarify, jQuery Mobile has a ‘built in’ method to simply add rounded corners to things, you just have to add class="ui-corner-bl ui-corner-br"… i’m looking ideally for that kinda method.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since pages in jQuery mobile are absolutely positioned, you’re going to have to add a position:relative div wrapper with a margin.

    <body>
  <div style='margin:20px; position:relative'>
    <div data-role="page">
    ...

    I’d recommend Google Chrome’s inspect tool, or Firefox’s firebug inspect tool, to help you understand and modify element’s CSS.

    EDIT:

    With the screenshots posted it’s evident that the margin is actually padding that is naturally given to . This jquery docs page in particular is missing a heading, so you dont see the full width of that. However if you scroll down you can see the footer is full width.

    • 0