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


Tags: css,jquery-mobile,iscrollview

Problem :

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


Solution :

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/


    CSS Howto..

    How to make an Image overlay the site on click?

    How to achieve this layout with CSS?

    How to remove and override CSS attribute from parent class?

    How to return a javascript set style property to CSS default

    how to change a css class onclick?

    How to position AdSense on site with CSS position: absolute

    How to locate the element within CSS using javascript

    How to change nav text color when scrolled over other div anchors in the page

    How to make an svg masked image compatible with Internet Explorer

    css in firefox and ie is rendering old css file…chrome shows new css just fine

    How to prevent HTML elements from being pushed down the page

    How to achieve a left and right background split leaving middle div visible?

    How can I change the css properties of a google visualization table and it columns?

    Jquery slideshow - time on initial image

    How to align / valign css-rotated span within its parent div

    How to add physics to CSS animations?

    How can I set a specific border around an element?

    How to align navbar to center with css

    How can i get my Jchartfx area graph to show up underneath my gridview?

    How do I style just the thumbnail image in this post?

    How do I center align a div that contains floated elements?

    How to make menu fold like paper using CSS?

    IN IE6, how to position transparent PNG using filter?

    How can I have an image float next to a centered div?

    How do I use CSS in Django?

    How to apply CSS3 rendering for optimal performance

    How can I use Modernizr to get border-radius working in IE8?

    How can I hide a DIV without using CSS?

    How to get Style From jQuery in angular2

    How i can put a picture above a border in css?