Textinput: Clear button padding is incorrect in "mini" mode

[dpolivy]

When you have an <input type="search"> with an added clear button, the right padding is not quite correct when ui-mini is also applied to the input, and the right edge of the input box slightly overlaps the clear button. Minor visual bug that's not normally detectable unless one tries to right align other elements inside the input, such as a spinning loading indicator for jQuery UI autocomplete.

This appears to be due to the .ui-mini style font-size: 12.5px. As the padding for the clear button is measured in em, and the size of the clear button is the same regardless of whether the parent input is normal or mini sized, the 2.25em padding is no longer sufficient when the font size is smaller. If the icon itself is fixed size, then it seems like the padding around it should also always be fixed size too?

This is easy repro-able and demo-able on the jQM textinput demo page, but I'm happy to port it over to jsbin if that's easier for you to debug.
http://demos.jquerymobile.com/1.4.0/textinput/

Simply scroll down to the "Mini" section on the demo page, type a couple of characters into the text input and use your favorite web debugger to inspect the input and parent div.ui-input-search layouts. You'll see the right edge of the input is overlapping the clear button.

[jaspermdegroot]

@dpolivy

Thanks for reporting the issue! Fix is on its way.

[dpolivy]

Thanks! But quick question on the fix: if someone overrides the default font size for inputs, won't the spacing break again? If the icon itself is fixed size, why not always have a fixed size margin for it?

[jaspermdegroot]

@dpolivy

The padding is on the container div so changing the input font-size won't affect the padding. See http://jsbin.com/AKOmUxa/125/edit

[dpolivy]

@uGoMobi

Yes, the padding is on the container div, but the default font-size (at least in jQM 1.4) is applied to the .ui-mini class, which is what is on the container div -- so if one changes/overrides the font size for mini inputs (by declaring a different font-size for .ui-mini), it does impact the padding. (And the same is true for the left padding, which is on the input itself, even if you apply the font size to the input directly.)