Filter form markup

4 posts, 0 answers
  1. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 27 May 2014 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 28 May 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. RES
    RES avatar
    77 posts
    Member since:
    Sep 2010

    Posted 28 May 2014 in reply to Kiril Nikolov Link to this post

    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;
    }
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 29 May 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready