Filter form markup

[RES]

I'm trying to take the markup that the mobile ListView renders for its filtering form and use it stand alone but I am having a problem when trying to use the HTML with the flat skin.  In this example it looks as expected in the UI Dojo but when you click the full screen button and view it as it's supposed to look the search input is not lining up with the search icon.  Not sure what the problem is.  Also are there any examples of how to use Kendo Mobile CSS for making a mobile search form?

http://trykendoui.telerik.com/UpuW/2

Scott

[Kiril Nikolov]

Hello Scott,

First of all, please note that such functionality is not supported. However I played a bit with your example and it turns out that the problem comes from the fact that search form is set to take 100% of its container, which is not present in your case. In order to fix this you need to set explicit width for the search box and it will be correctly aligned, please check the updated example here:

http://trykendoui.telerik.com/@Kiril/UyAP

Regards,
Kiril Nikolov
Telerik

 

 

[RES]

Setting the width of the input to a specific pixel value won't work for me, I need the input to fill the space.  From what I see in other examples the way the search icon is typically set is as the background image for the container div either as an image file or an SVG string with the input being set to 100%.  Not sure why setting display to block for the input doesn't fill the space but anyway.  I think using the font icon for the content property is part of the problem.  I ended up home brewing my own CSS based on other examples to create the search form.

<form class="search-form">
    <div>
         <input placeholder="Search..." type="search">
    </div>
</form>

CSS

form.search-form {
    padding: 7px;
}

.search-form > div {
    padding: 5px;
    background-image:
url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20e
ncoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2
F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG
%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1
%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%
22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%
20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014
%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspa
ce%3D%22preserve%22%3E%3Cpath%20d%3D%22M10.171%2C8.766c0.617-0.888%2C0.979-1
.964%2C0.979-3.126c0-3.037-2.463-5.5-5.5-5.5s-5.5%2C2.463-5.5%2C5.5s2.463%2C
5.5%2C5.5%2C5.5%20c1.152%2C0%2C2.223-0.355%2C3.104-0.962l3.684%2C3.683l1.414
-1.414L10.171%2C8.766z%20M5.649%2C9.14c-1.933%2C0-3.5-1.567-3.5-3.5%20c0-1.9
33%2C1.567-3.5%2C3.5-3.5c1.933%2C0%2C3.5%2C1.567%2C3.5%2C3.5C9.149%2C7.572%2
C7.582%2C9.14%2C5.649%2C9.14z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: 10px center;
    border: 1px solid #ccc;
}

.search-form input[type=search] {
    width: 100%;
    padding: 0 0 0 30px;
    background-color: transparent;
    border: 0 none;
}

[Kiril Nikolov]

Hi Scott,

The search windows was not designed to work outside of its ListView implementation, so it is absolutely expected for custom CSS to be needed if used outside of its designed purpose. If you think that this should be a stand alone component, please check the UserVoice section and post it as a suggestion.

Regards,
Kiril Nikolov
Telerik