csshtmljquery-mobilejquery-mobile-buttonjquery-mobile-checkbox

jQuery Mobile layout customization


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:

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

EDIT: I'd like something like this:

desired layout


Solution

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