jquery ui spinner malfunctioning with jquery mobile - jquery-ui

Question

I'm trying to use jquery ui spinners in a table with jquery mobile 1.4.0
<div class="table_data">
<table data-role="table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th>Address</th>
<th>Doorbells</th>
<th>Mailboxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
<tr>
<td>3</td>
<td>
<input type="text" class="spinner" name="doorbells"/>
</td>
<td>
<input type="text" class="spinner" name="mailboxes"/>
</td>
</tr>
</tbody>
</table>
</div>
<script>
$( ".spinner" ).spinner();
</script>
In the jsfiddle link below you can see my problem. The buttons don't show up in the correct place and they don't even work anymore.
http://jsfiddle.net/murtho/ZZqu6/5/
When I do not include the jquery ui js and css file the spinners work just fine. I need the mobile ui for other features in my application, but I also wish to implement the jquery spinner (of an alternative solution)
This is how it should be working:
http://jsfiddle.net/murtho/tf89L/2/

Answer 1

jQuery UI and jQuery mobile don't play together that well.
For your number spinner, you can fix the formatting with one extra line of code to remove the jQM classes from the spinner button divs:
$(document).on("pagebeforeshow", "#page1", function(){
$( ".spinner" ).spinner();
$(".ui-spinner div" ).removeClass(function() {
return $( this ).attr( "class" );
});
});
Here is your updated FIDDLE
Another option is to set type="number" on the input boxes; however, not all browsers understand this.
You will need to see if jQuery UI causes any other problems with your particular application...