search input on header: clear button's position isn't correct when I input some characters #4619

Closed
davidlilin opened this Issue Jun 28, 2012 · 2 comments

3 participants

@davidlilin

If i put search input on header/footer, after i type in some letters in search input, you will see the clear button will display on the outside of input field.

http://jsbin.com/udukel/5/

@agcolom
jQuery Foundation member

@davidlilin Thanks a lot for the test page. I confirm the issue.

@uGoMobi @toddparker This seems to be due to the padding rule in:

.ui-header .ui-fullsize .ui-btn-inner, .ui-footer .ui-fullsize .ui-btn-inner {
font-size: 16px;
padding: 0.6em 25px;
}

@jaspermdegroot jaspermdegroot added a commit that closed this issue Jul 1, 2012
@jaspermdegroot jaspermdegroot Buttons: Adjusted CSS selector for fullsize button in toolbar. Fixes #…
…4619 - Search input clear button gets unwanted padding when in header/footer. [1.1.2.]
bd5b4a7
@jaspermdegroot
jQuery Foundation member

@davidlilin

This fix came just too late to make into the 1.1.1. release. As a temporary fix you can add this to your custom CSS:

.ui-input-clear .ui-btn-inner { padding: 0 !important; }
@jaspermdegroot jaspermdegroot added a commit that referenced this issue Jul 12, 2012
@jaspermdegroot jaspermdegroot Buttons: Adjusted CSS selector for fullsize button in toolbar. Fixes #…
…4619 - Search input clear button gets unwanted padding when in header/footer. [1.1.2.]
cbea74a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment