css - iScrollviewを使用してスクロールバーをjQuery Mobileポップアップに正しく追加するにはどうすればよいですか?

Question

jQuery Mobile、iScrollview、および Google マップを使用して Web ページに取り組んでいます。マップが初期化されると、画像を含む情報ウィンドウを含む一連のマーカーが読み込まれます。画像がクリックされると、jQM ポップアップのコンテンツがリストとともに読み込まれ、ポップアップが表示されます。

私は2つの問題を抱えています:

1) jQM ポップアップのコンテンツの高さ (例: 150px) を設定するにはどうすればよいですか? iScrollview を使用すると、コンテンツの高さがオーバーライドされて大きくなります。ドキュメントで指定されているようにrefresh()を使用しても効果はありません (または、間違って使用していますか?)。

2) リストがコンテンツの高さを超える場合にのみスクロールバーを表示する方法はありますか? 現在、常にスクロールバーが表示されます。

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');
}