Listview with filter, search box position

[dhcDeWe]

The position of the searchbox for filter on listview has some position issues, it has whitespace around it (not sure whether this is intended) but the bottom of the input field disappears behind the listview

http://jsbin.com/ofuhaw/163/edit

I did manage to somewhat correct this with the following CSS change (update to margin)

.ui-input-inset, textarea.ui-input-text { margin: -1em -1em 1em -1em;}

[frequent]

@uGoMobi:

the listview filter and the original filterable widget had the following CSS:

.ui-filter {
    border-width: 0;
    overflow: hidden;
    margin: -1em -1em 1em -1em;
}
.ui-filter-inset {
    margin: 1em -.3125em -1em;
    background: transparent;
}
.ui-collapsible-content .ui-filter {
    margin: -.625em -1em .625em -1em;
    border-bottom: inherit;
}
.ui-collapsible-content .ui-filter-inset {
    margin: -.3125em;
    border-bottom-width: 0;
}
.ui-filter .ui-input-search {
    margin: .3125em;
    width: auto;
    display: block;
}

which is no longer in CSS, because we dropped the ui-filter class if I see it correctly.

I'm adding the respective CSS back where needed.

[jaspermdegroot]

I noticed this issue after 1.4 alpha, but didn't fix it yet because I want to make some changes. We added option inset for textinputs to adjust styling but I want to remove that option and do this a bit differently.

@frequent - Thanks, but no need to do a PR for this.

[frequent]

@uGoMobi: ok. np. Don't forget the search input also needs some negative margin inside collapsibles.

[jaspermdegroot]

You can now use class ui-filterable on the input or its form wrapper to have the framework adjust the margin between the input and the listview.

Edit: I made some changes in the CSS. Class ui-filterable should be added to the form in which the search input is wrapped or the listview itself, not to the input element or its div wrapper.

[dhcDeWe]

@uGoMobi When I try 1.4.0a2 I am still seeing the same issue as presented in the example, my page only contains input and listview (they are separate as I read that would be the preferred method). If I put the input inside the ul it looks better but has other issues

[jaspermdegroot]

@dhcDeWe

See my previous comment. You have add the ui-filterable class to the listview or to the form element in which you wrap the input. http://jsbin.com/ofuhaw/214/edit