Home/ Questions/Q 7192183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T19:53:15+00:00

I want vertically grouped checkboxes with a search filter. Is there a way to

  • 0

I want vertically grouped checkboxes with a search filter.

Is there a way to style a regular Search filter list to look like vertically grouped checkboxes?

or

Can I add the search filter to the group of checkboxes?

Example started: http://jsfiddle.net/NwbZu/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use CSS to get the listview to compress into a smaller space:

    /*remove background color from search input*/
.ui-listview-filter {
    background : none;
}
/*remove the vertical padding, background gradient, and border for each list-item*/
#dataPointList .ui-li {
    padding    : 0px 15px;
    background : none;
    border     : none;
}
/*remove the margin from the check-box container*/
#dataPointList .ui-li .ui-checkbox {
    margin : 0;
}
/*remove the rounded corners from all of the .ui-btn elements*/
#dataPointList .ui-li .ui-checkbox .ui-btn-corner-all {
    -webkit-border-radius : 0;
    -moz-border-radius    : 0;
    border-radius         : 0;
}
/*re-add the rounded corners (top only) for the first list-item element*/
#dataPointList .ui-li:first-child .ui-checkbox .ui-btn-corner-all {
    -webkit-border-top-left-radius  : 1em;
    -moz-border-top-left-radius     : 1em;
    border-top-left-radius          : 1em;
    -webkit-border-top-right-radius : 1em;
    -moz-border-top-right-radius    : 1em;
    border-top-right-radius         : 1em;
}
/*re-add the rounded corners (bottom only) for the last list-item element*/
#dataPointList .ui-li:last-child .ui-checkbox .ui-btn-corner-all {
    -webkit-border-bottom-left-radius  : 1em;
    -moz-border-bottom-left-radius     : 1em;
    border-bottom-left-radius          : 1em;
    -webkit-border-bottom-right-radius : 1em;
    -moz-border-bottom-right-radius    : 1em;
    border-bottom-right-radius         : 1em;
}

    Here is a demo: http://jsfiddle.net/NwbZu/2/

    When you search this will not update the list, for instance if you search for 6 in the demo you will get only one item and it will not be updated to have all its corners rounded. You can however achieve this using JS (I’m not sure if you can make selections in CSS for only visible elements).

    Let me know if you have any questions.

    • 0