I am trying to put together a form with a numeric input that pops up with the numeric keyboard on a mobile device. To do this, I am using an input with type=number. It renders correctly on a desktop (in which case it expectedly looks and behaves exactly like an input with type=text). On my Windows Phone 8, it also displays correctly and pops up with the numeric keyboard.
The problem is when I tested it on my old Android (HTC One V), the numeric input is rendered a little bit narrower than an input with type=text. You can see my code markup here: http://bootply.com/101579. This becomes an issue because I created a Bootstrap 3 input-group with an input-group-addon. On my HTC Android browser, the input is rendered shorter, so there is a gap between the input box and the input-box-addon.
You can see what I mean here: http://www.browserstack.com/screenshots/a989247294985fc48ab3c3be9f4d1151e301384a. When you look at the screenshots for many of the Android devices (including Samsung Galaxy S III and HTC One X), you can see that the inputs with type=number render more narrowly. When you look at any of the iPhones or the Motorola Droid 4, you can see the form rendered correctly.
Is there a workaround to this issue that will render the input boxes with type=number the same width as those with type=text?
Edit: I looked at the list of emulators, and I realized that this is only a problem on the Android 4.x stock browser.
Edit: Neither of the links above work anymore.