This is a migrated thread and some comments may be shown as answers.

Filter form markup

3 Answers 44 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
RES
Top achievements
Rank 1
RES asked on 27 May 2014, 05:55 PM
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

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 28 May 2014, 07:35 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
RES
Top achievements
Rank 1
answered on 28 May 2014, 05:40 PM
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;
}
0
Kiril Nikolov
Telerik team
answered on 29 May 2014, 11:13 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ListView (Mobile)
Asked by
RES
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
RES
Top achievements
Rank 1
Share this question
or