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:

desired layout

Updating example. I've used grids to achieve what you want http://jsfiddle.net/5avUc/3/ — Omar, Apr 17 '13 at 10:45

Gajotres · Accepted Answer · 2013-04-17T10:46:43.793

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

Thanks so much! your point "*unless we have a parent div everything will go to hell*" is exactly what I needed... I've been struggling a lot trying to customize `CSS` but nothing was working! — MikO, Apr 17 '13 at 11:00

Omar · Answer 2 · 2013-04-17T14:38:07.143

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

edited Apr 17 '13 at 14:38

answered Apr 17 '13 at 10:56

Omar

32,302
9
69
112

Thanks @Omar, good approach too, using `grids`, although the `rememberMe` checkbox is wider than the text inside... – MikO Apr 17 '13 at 11:02
@MikO I am in love with grids ;) I updated my answer anyway for future reference. – Omar Apr 17 '13 at 14:39

score 0 · Answer 3 · answered Apr 17 '13 at 10:38

0

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.

answered Apr 17 '13 at 10:38

Niels Keurentjes

41,402
9
98
136

It has nothing to do with @media queries. This can be achieved by using ui-grids. – Omar Apr 17 '13 at 10:46
@Niels I'm not blaming jQuery Mobile, but as far as I understand it's intended to allow mobile developers to create apps without writing any `CSS`. In fact, it includes `CSS` classes and `HTML` attributes than can be used to customize the interfaces... I'm only saying that those customization options are very few in my opinion... – MikO Apr 17 '13 at 11:07

jQuery Mobile layout customization

3 Answers3