How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

Question

I am working on a webpage using jQuery Mobile, iScrollview, and Google Maps. When the map gets initialized, it will load a set of markers with infowindows containing an image. When the image gets clicked, it will load the content of a jQM popup with a list and show the popup.

I am having 2 problems:

1) How can I set a height (e.g. 150px) for my jQM popup's content? Using iScrollview, the content's height becomes overridden and becomes large. Using the refresh() as specified in the documentation has no effect (or am I using it wrong?).

2) Is there a way for me to show a scrollbar only if the list exceeds the height of the content? Currently, it always shows a scrollbar.

HTML

<div style="display: none;">
    <div class="popup">
        <div class="header" data-role="header">
            <h1>Products</h1>
        </div>
        <div class="content" data-role="content" data-iscroll>
    </div>
        <div class="footer" data-role="footer">
            <a class="close" href="#" data-rel="back" data-role="button">Close</a>
        </div>
    </div>
</div>

CSS

.popup {
    width: 175px;
}
.popup .content {
    height: 150px; /* has no effect */
    padding: 10px;
}
.popup .content ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
} 
.popup .content ul li {
    height: 23px;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
} 

JavaScript

var markers = [];

function addMarker(i, retailer) {
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(retailer.lat, retailer.lng),
        products: retailer.products // array of strings of unknown length
    });

    var infobox = new InfoBox({
        boxClass: 'infobox',
        closeBoxURL: '',
        content: '\
            <img class="detail" src="img/arrow_light.png" alt="" onclick="openPopup('+ parseInt(i) +');" />\
            <div class="name"><span>' + retailer.name + '</span></div>\
            <div class="address"><span>' + retailer.address + '</span></div>\
            <div class="arrow"></div>',
        maxWidth: 500,
        pixelOffset: new google.maps.Size(0, -110)
    });

    markers.push(marker);
}

function openPopup(i) {
    var items = [];
    // create list
    $.each(markers[i].products, function(i, name) {
        items.push('<li>' + name + '</li>');
    });
    // set popup's content
    $('.popup .content')
        .empty()
        .append('<ul class="list">' + items.join('') + '</ul>')
        .iscrollview('refresh');
    // show popup
    $('.popup').popup({ history: false, transition: 'pop' }).popup('open');
}

Answer 1

Only thing you need to do is override popup content height and inforce it like this:

.ui-popup .ui-content {
    height: 150px !important;
}

Remember to use !important if you want to override class css. !important is only needed when working with classes. For example if you initialize your css through id (#) !important is not needed.

Working example: http://jsfiddle.net/Gajotres/N28Vg/