CODEWITHSUNDEEP
imagelistviewjquery-mobile
speedracer2003
speedracer2003

Reputation: 181

Adding an additional image on the right of listview element in Jquery Mobile

I've been struggling with the code below. What I basically need to do is to show an image on the right AND left side of the element. Both images should be the same size. I also need the text to be centered at all times in any view. It would be nice to have some options of being able to change the font and color. 

<html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">

<style>
    .ui-li-thumb, .ui-li-icon {
    max-height: 40px;
    max-width: 40px;
    height:35px; !important
    width:37px; !important
    position: absolute;
    padding-top:3px;
    padding-left:5px;    
    }

    li a { 
    min-height:20px !important; 
    height: 20px;
    padding-bottom: 10px;
    padding-top: 5px;
    }


    .ui-page .ui-content .ui-listview p {
    margin-top: -0.10em;
    margin-bottom: 0em;
    line-height    : 15px;
    vertical-align : top;
    font-size: 0.90em;
    font-weight: 600;
    padding-top: 20px;
    }
</style>

<ul data-role="listview" data-divider-theme="b" data-inset="true" >
    <li data-role="list-divider" role="heading"><center>ID</center></li>

    <li  data-icon = "false">
       <a href="#" > <img class="ui-li-thumb" src="http://lorempixel.com/80/80/technics/1/">                 
          <p>ID NAME <br>number</p>  
       </a>
    </li>


   <li  data-icon = "false">
      <a href="#" > <img class="ui-li-thumb" src="http://lorempixel.com/80/80/technics/1/">  
          <center><p>ID NAME</p><p><br>number</p></center>
      </a>
   </li>
</ul>
</html>

Upvotes: 1

Views: 1702

Answers (1)

ezanker
ezanker

Reputation: 24738

Here is one way to do it.

<ul data-role="listview" data-inset="true" class="has-right-radio">
    <li data-icon="false"> 
         <a href="#">
            <img src="http://lorempixel.com/80/40/technics/1/" />  
            <p class="green bigfont">ID1</p>
            <p class="green bigfont">First set of description text.</p>            
            <div class="right-radio"> 
                <img src="http://lorempixel.com/80/40/technics/6/" />
            </div>
         </a>
    </li>
</ul>

.has-right-radio {
    min-width: 240px;
}
.has-right-radio img {
    width: 80px;
    height: 50px;
}
.has-right-radio a {
    padding-right: 100px !important;
    min-height: 41px !important;
    padding-top: 4px;
    padding-bottom: 4px;
}
.has-right-radio a p {
    white-space: normal !important;
    text-align: center;
    margin: 0;
}
.right-radio {
    position: absolute;
    top: 0px; bottom: 0px; right: 0px;
    width: 80px;
    border: 0;
    background-color: rgb(246, 246, 246) !important;
}
.green {
    color: green;
}
.orange {
    color: orange;
}
.bigfont {
    font-size: 14px !important;
}

Let's walk through the CSS:

The first rule just imposes a minimum width on the whole list so that images don't run into eachother at small screen widths.

The second one sizes you images regardless of their original size. In this example they are 80px wide and 50px high. THis is where you can change the height of the images.

The third one adds padding to the right so text won't go over the right image. Additionally it sets the top and bottom padding and imposes a minimum height so that the image will be displayed. If you change the image height, you will need to set the min-height here to desired image height minus padding-top minus padding-bottom minus 1 (border).

The .right-radio rule absolutely positions the right image and the rest of the rules basically format and position text.

Here is a DEMO of the above

Upvotes: 1

Related Questions