How to create mini inline form buttons in jQuery Mobile 1.4.2?

Question

I have a site that currently uses jQuery Mobile 1.3.2. I have 3 <input> buttons that are styled with <input type="submit" id="1" value="1" data-mini="true" data-inline="true" /> to create 3 small horizontally aligned buttons.

I'm trying to upgrade to jQM 1.4.2, and have followed the documentation to change from using the data attributes but instead setting the class to be like <input type="submit" id="1" value="1" class="ui-btn ui-btn-inline">. Instead of getting 3 buttons lined up in a row like this: "1 2 3", I'm getting 3 buttons taking up the entire width of the container flowing vertically like this:

" 1 "
" 2 "
" 3 "

Is there a way to re-create what I did in jQM 1.3.2 using 1.4.2?

Answer 1

The documentation unfortunately isn't clear. Both data mini and inline can be used on input, however, you can add them directly as classes to a and button tags.

input is wrapped in a div holding all classes. So if you add class to input itself, they won't make any difference. If you use data-mini and data-inline, jQM will recognize them and will add classes to parent div (wrapper).

<input type="submit" value="Submit" data-inline="true" data-mini="true" />

Demo