This blog is about tips
on using Sencha Touch.

Follow it via
RSS or Twitter.

Steffen Hiller is owner & lead developer of 360releases Ltd.,
a Sencha Touch, Ext JS & Ruby on Rails consultancy shop.

You can follow him on Twitter @steffenhiller.

#5 A prettier search field

February 13, 2011

The search field that comes built-in in Sencha Touch (as of version 1.0.1) obviously didn't receive as much love as other parts of the framework.

A search field is a common requirement and I used it already in various Sencha Touch projects. Therefore a few weeks ago I decided to give it some love and make it a bit prettier.

Here's a screenshot of the modified version, which adds a bit inset shadow to the top, adds a bit gradient to the border and adds the search icon:

You can see a demo of it here.

For the record, here's how the search field looks in Sencha Touch by default:

Below is the SCSS code you need to include into your project. You're welcome to tweak it to your liking.

.x-field {
    margin-top: 0.25em;
    .x-input-search {
        height: 26px;
        font-size: 0.8em;
        line-height: 25px;
        padding: 0px 15px;
        border-radius: 12px;
        border-top: 0.1em solid rgba(0, 0, 0, 0.2);
        border-left: 0.1em solid rgba(0, 0, 0, 0.125);
        border-right: 0.1em solid rgba(0, 0, 0, 0.125);
        border-bottom: 0.1em solid rgba(0, 0, 0, 0.05);
        background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABUhJREFUeNrUW/1zFEUQ3b27JAYluUMNhCKU+EGiiCBUYSlIWer/rD+ohUjiVxVYCooCSUoMAXOBfEFIJFnfY99Z51Vumd6Zvdx11au9H3Zm+2339HT37MVJkkQ+EsdxCZcKUAb2AMNA86QxsAw8AraAJ3jmdrRLUvEg+gIue4ExYBTYB/RlDCHJOjCPsfdwvQ/iK50mHFstDGWHRPI14IDHs0l+FvgTOtS7jjCIDuLyDnAEGAqoA139DnAVuvy964RBNJZFz8hti5KHwI/AzSLXeCZhcO3H5STwts96NwiJXgd+gF6bHSUMsgxAH8mFOy0zIr3cEcIg+xwu54BXo92TJeAz6LcactJSmzX73i6TpVSph15+cYQViY9G3SF86SeV3IRPPDDxARGOc8630YRtzTMg5LUU9eF2NR2UMMjy9ylgMMc8i9pLF4AHWHeLLYlKTdkY8XKO+U9jnjnMuxEsaGFCus/Hbdw8a+/8nmQxzyOH5IVWPggcB/YbnkMlf8UzJoOsYWVR40ayd4HPocRNF7JPtU6SxwBd80vgVkuRkfmugMPQ86VQQYtudsgwju77RbPrWgTj1nC5APxmGMZC5fV0E/EgrAh42BCoGEAuuFo1gzRLxSngtmHYqEfw+8/Cg4Y9lySnZCFvUc58kYHOcUhN9bYX4RHDW7utSBxMQJqB72fDrlLzJXzIYN0biW+LZGeZA+453juiLTQ3YdfItwyudwrKqNYMa7nqU7mVHIt5WnW+qPxRTlNXdvYsGfIlPOBw35YUKlK4lh873MdGYTlk8dCuMH/YgeI/KfgZpsyq6NZqHHVASgZl+qPukbhowmVDNM8rA44vldvjEx/CDxzv218wYWZQfQ73bfosLxK573jvPp02hPfPtDs66nj7kq+FXbcbkn2lIOtWDRlf3ZfwnKOLcLOfgDUGAluX8eEtQ6el7tOoL8lFXI84ePJwImRTLUqb/K5Nw1Xp67UtMYuaNio47luIy7qsw08YhiyIdH7Cqn7+itIzXNcS7X26Yd6qJU7lDfw8byhN2cCb9q3WGq5Jsr8bxpHoWeADdSUtZJkLs/X6ofJiV2H5OOvrVRVVKwkUmZW7uipBn57QdsWXNY9pljKIVhUD2CwcM+rJvfeXEKeKlaYSbQlKXcXP08ZqZERYw/gV1barwh6hprJur0cq2RcFkP8dpunE8JMober5Vj7bWjKhIjqrte+g761gxQMm+4eTGrKvrHkrAclSnmewhFEOBq2WtA4vdaD+zSNcHud9SGcdiLNY+FRvttuEFdMkdJ8JRlikGYzOdaA0zLump6ykXT5qYdFwRoVDpQst/ZWlm+r02ZLSyDeBY1ExX/IwbqyoRLRuPxx30ZW06cM0ZVXHVcoNByDKvZqKXuPHaZif59OnckR3ZopfY467QQm3EK/JzceMKeJ6lB61cu0ttH6pg7knFDdKOdz7EuabDU64SbmKkn++gBdl9SFlaokypC25HYkt6vdmu++wtHwmlKuXcwSyb3UGHZ7wTlVQtHNHMbFWOZhqXJYuhwxkcTFnY8Fe4Lta0+VQgayrCYv0UVnauiWua03PZKaW3SZQ+I8o/VLAWhoOql4/0lOEJdeV31u7lUyLz4L0aKMl1ROEueyABumtPAVHIz3uFQs3u/eVHKS5XR5jS7inCIv0ZVnauqb5l4X+niMsYQ9t0kiaUX64JwlrTfOjtm+M7r3eqxZuEKelLzuSZga20dOERfqKLP2sLesn5vA9T7glOWn3x5Br3MvZ1+761NKQgvJSVaNiREUMrX4jSv8a9NTt/xVgADf/+DWpDs3NAAAAAElFTkSuQmCC') no-repeat 7px 5px;
        background-size: 15px;
        -webkit-background-image-opacity: 0.5;
        -webkit-box-shadow: #DFDFDF 0px 1px 1px inset;
    }
}

// Fix for missing padding on iPhone and iPad
.x-phone,
.x-tablet {
    .x-input-search {
        padding: 0.2em 25px !important;
    }
}

That's all. Suggestions and applauding comments are welcome.