Geek asks and answers

Jquery mobile Data-Filter Fixed / Static

I am using listview with data filter in ul and long list.

My problem is that when scrolling down, the data filter search disappears.

In any case, could I make it always visible?

Example:

<ul data-role="listview" data-filter="true">
<li><a href="index.html">Acura</a></li>
<li><a href="index.html">Acura2</a></li>
<li><a href="index.html">Acura3</a></li>
<li><a href="index.html">Acura4</a></li>
</ul>
+5
source share
1 answer

You can customize the CSS element of the search filter so that it is fixed in the viewport.

#my-wrapper {
    padding-top : 45px;
}
#my-wrapper form {
    position : fixed;
    top      : 15px;
    left     : 15px;
    width    : 100%;
    z-index  : 1;
}​

You will notice the selector #my-wrapper, I used it to be able to configure only search input for a specific listview widget. My HTML looks like this:

    <div id="my-wrapper">
        <ul data-filter="true" data-role="listview">
            ...
        </ul>
    </div>

- listview , . jQuery Mobile - DOM listview.

: http://jsfiddle.net/vmndx/

+13

More articles:


All Articles