Bronzato Bronzato - 4 months ago 21
Javascript Question

Having an image on the whole width of a jquery mobile listview?

I would like to place an image inside a listview of a jquery mobile website. Is there a way to have an image on the whole width of a jquery mobile listview? I mean without white border on the listview: no space between the border of the listview and the image itself. >> The image expand on the whole width of the listview.

Answer

Live Example: http://jsfiddle.net/k68Zp/23/

<div data-role="page" data-theme="b" id="jqm-home"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" style="white-space:normal"> 
            <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-e ui-corner-top">Techno: vb.net - asp.net - vb6</li> 
            <li class="custom_listview_img"></li>
        </ul>
    </div>
</div>

CSS

.custom_listview_img {
    margin:0px; 
    padding:0px;
    background-image:url('http://www.flightcentre.com.au/global-images/AIRFARE_SPECIALS_2/Paris.jpg');
    background-repeat:no-repeat;
    background-size:100%;
    height:150px;
}