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;
}