jQuery Mobile layout customization

Question

I'm taking my first steps in jQuery Mobile and I'm getting a bit disappointed with the lack of customization it provides...

As an example, I have a simple form and I'd like to customize the layout of the form components.

This is my code:

<form id="loginForm" action="#" method="post">
  <input id="rememberMe" name="rememberMe" type="checkbox"/>
  <label for="rememberMe">Remember me in this computer</label>

  <a id="info" href="#" data-role="button" data-icon="info" data-iconpos="notext">Info</a>

  <input id="submit" type="submit" value="log in" data-inline="true"/>
</form>

See the fiddle.

Concretely I'd like:

• The rememberMe checkbox to be as wide as the text inside, and the info button to be inline with the checkbox.
• The "group" containing the previous checkbox and button to be aligned to the right.
• The submit button to be to the right as well.

Please provide an example of how such things can be achieved...

EDIT: I'd like something like this:

Answer 1

Customization you require will not come from jQM but from custom css.

Usually this could be easily done with jQuery Mobile grids but they are not that flexible. So you need a custom solution.

A div around every element is needed because jQM recreates every element with new style and unless we have a parent div everything will go to hell.

Working example: http://jsfiddle.net/Gajotres/8NB22/

HTML :

<form id="loginForm" action="..." method="post">
    <div class="row">
        <div class="inline-mid">
            <a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext" class="middle-button">Info</a>
        </div>    
        <div class="inline-left">
            <input id="rememberMe" name="rememberMe" type="checkbox"/>
            <label for="rememberMe">Remember me in this computer</label>        
        </div>
    </div>
    <div class="row">
        <div class="inline-left">        
            <input id="submit" type="submit" value="log in" data-inline="true"/>        
        </div>    
    </div>    
</form>

CSS :

.row  {
    min-width: 400px;
    width: 400px;
}

.inline-left, .inline-mid , .row {
    position: relative;
    float: right;
}

.inline-mid {
    margin-left: 10px;
    padding-top: 5px;
}

Answer 2

Layout should never be primarily the responsibility of Javascript code, as such you shouldn't blame jQuery Mobile for this.

Customization for different screen sizes should be done with CSS Media Queries instead, click the link for more examples than you'll ever need.

Answer 3

This can be achieved using ui-grid classes.

Working Demo

Markup

<form id="loginForm" action="..." method="post">
 <div class=ui-grid-a>
  <div class=ui-block-a>
   <input id="rememberMe" name="rememberMe" type="checkbox"/>
   <label for="rememberMe" data-inline="true">Remember me in this computer</label>
  </div>
  <div class=ui-block-b>
   <a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext">Info</a>
  </div>  
 </div>  
 <div class=ui-grid-solo>
  <input id="submit" type="submit" value="log in" data-inline="true"/>
 </div>
</form>

Override CSS

.ui-block-a { width: 95% !important; text-align: right !important; }
.ui-block-b { width: 5% !important; padding-top: 5px !important; }
.ui-grid-solo { text-align: right !important; }