Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

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

Closed
dpolivy opened this Issue Jan 27, 2014 · 4 comments

Comments

Projects
None yet
2 participants

dpolivy commented Jan 27, 2014

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.

@ghost ghost assigned jaspermdegroot Jan 28, 2014

Member

jaspermdegroot commented Feb 6, 2014

@dpolivy

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

dpolivy commented Feb 6, 2014

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?

Member

jaspermdegroot commented Feb 7, 2014

@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 commented Feb 13, 2014

@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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment