Jquery Mobile how to set height of Listview which is in collapsible-set

Question

I've programmatically created a popup, collapsible and listview are inside the popup's content

collapsible and listview are dynamically created by using $.map to load my data

here is my jsFiddle

I just wonder does it has any way to limit how many <li> is showing in listview?

for example

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>

I only want to let it show 4 <li>, then the fifth<li> is shown by scrolling<ul>

how can I do to achieve it ?!

I've tried to set height of <ul> , but it doesn't work...

Sorry for my poor English... I'm Taiwanese

if you don't understand what I'm trying to say, please tell me

I will try to explain it better

Answer 1

Here is your fiddle updated with a solution: http://jsfiddle.net/ezanker/CnSMr/2/

Basically, I assigend a class to your collapsible div (.popupcollapsediv) and then put your UL inside a dive with class .ulcontainerdiv.

    $.map(kennedy.webdb.userdata[0].Category, function (value, key) {
    return $("<div/>", {
        id: value.Name,
        "data-role": "collapsible",
        "data-inset": "false",
        class: "popupcollapsediv"
    }).append(
      $("<h2/>", {
          text: value.Name
      })).append(
        $("<div/>", {
          class: "ulcontainerdiv"
        }).append(
          $("<ul/>", {
            "data-role": "listview",
            "data-icon": "false"
          }).append(
    ...

I then used CSS to set the max-height of the div that contains each UL while allowing scrolling if the contained UL is taller than that max-height; and to remove padding from that autogenerated div created by the collapsible.

.ulcontainerdiv{
    max-height: 170px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.popupcollapsediv .ui-body-a {
    padding: 0;
    margin: 0;
}

Answer 2

Since jQuery.map sends both the value and the index of the array to the callback function, why not just include something in your callback like so:

$.map( array, function ( value, index ) {
  // Make li here
  if ( index >= 4 ) {
    // Hide li here however you want, maybe just use .hide
  }
});