jQuery Mobile responsive thumbnail listview

i need help when constructing a responsive jQuery Mobile listview. I'm kind of stuck.

What i wanna have is a thumbnail listview with responsive (auto scaling) images, based upon the size of the viewport.

I'm stuck with the layout i'm trying to use display: inline-table;. Is there a way to accomplish or an alternative e.g. with media-queries?

I've made a jsfiddle in order to illustrate my concerns.

Fiddle

I would like to have the text vertically centered. The arrows should stay at their respective position even on resizing, but they're leaving their bounds, when the container shrinks.

There has once been a similar thread on github (look here), where some guy posted a javascript-based solution, but i wonder if there is'nt a CSS3 solution.

Any help is appreciated.


UPDATE This Fiddle here is resizing the images, but not keeping the aspect ratio.

Answers


If you don't have anything against html tables, this is pretty easy to do

Here is a DEMO

The table has separate cells for the image, text and thumbnail. Thumbnail td width is set to a specific pixel value so it never changes. The image td is set to 30% and the image sizes with viewport size. The text td takes up the rest of the space and vertically aligns to the middle. The rest is css styling to get the look you want:

<div class="div-list">    
<table class="listTable" >
    <tr>
        <td class="list-elem-thumb">  
            <img src="http://splusk.de/wp-content/uploads/2010/03/metro-2033-20091102111356147_640w1.jpg" />
        </td>
         <td class="list-elem-text">  
             asdasdasdasd
        </td>
         <td class="list-elem-ico">  
            <div class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</div>
        </td>
    </tr>
</table>
</div>

.div-list {
    border-radius: 0.6em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1px solid #CCCCCC;
    padding: 2px;
}
.listTable {
    width: 100%;
    border-radius: 0.6em;
    border-collapse: collapse; border-spacing: 0;
}
.listTable tr:not(:first-child) > td {
    border-top: 1px solid #CCCCCC;
}
.listTable tr {
    background: linear-gradient(#FFFFFF, #F1F1F1) repeat scroll 0 0 #EEEEEE;
    color: #222222;
    font-weight: bold;
    text-shadow: 0 1px 0 #FFFFFF;
}
.listTable td {
    vertical-align: middle;
    padding: 0;
}
.listTable .list-elem-thumb{
    width: 30%;
    padding: 2px;
}
.listTable .list-elem-thumb img {
    max-width: 100%;
    min-height: 50px;
    min-width: 125px;
}
.listTable .list-elem-text {
    padding-left: 10px;
}
.listTable .list-elem-ico {
     width: 24px;
}

UPDATE: max-width does not work with FireFox, add width as well:

.listTable .list-elem-thumb img {
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    min-width: 125px;
}

DEMO


Need Your Help

i need to void dot(.) form user key press is not working

javascript jquery jquery-ui

This is my jquery it is avoid all the symbols and alphabet but it allow a dot (.) i don't know why someone help me please. . .

Loop invariant Hoare Logic

proof-of-correctness hoare-logic

I have a program, where I should find a loop invariant and then provide a proof.