Formatting Jquery Mobile Listview item with CSS

Question

I was wondering if it's possible to have a list item like the sample below (I tried to add an image but this site would not allow it. I"m guessing b/c I'm new). As you can see the icon is on the left, the "header image" is aligned with "image2" and they seperated by a horizontal line. Then you can see the text fields side by side (also seperated by the horizontal line)

------------------------------------------------------------------------------
|**********|___________Header Image______|__IMAGE2_|
|**ICON**| -----------------------------------------------|.,,,,.,,,.........|
|**********|................... TEXT ............................|,,,TEXT..,,,,|
|**********|..........................................................|..................|
------------------------------------------------------------------------------

I saw that there are ways to override the list properties with CSS, however I have very little experience with this and have no clue where to even being making the changes. I saw this sample on a website and it has the icon on the left but not the other parts that I need.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<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>
</head>
<body>

<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>Split Buttons</h2>
<ul data-role="listview" data-inset="true">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
    <a href="#">Some Text</a>
  </li>
  <li>
    <a href="#">
    <img src="firefox.png">
    <h2>Mozilla Firefox</h2>
    <p>Firefox is a web browser from Mozilla. Released in 2004.</p>
    </a>
    <a href="#">Some Text</a>
  </li>
</ul>
</div>
</div> 

</body>
</html>

Do you want the whole LI to be one link or is the part on the right a separate link (maybe no links at all?)? What sizes are the header image and image2? Is the part on the right a fixed width? if so what width? Does the header image need to stretch to fill available horizontal space? — ezanker
– ezanker, Commented Sep 15, 2014 at 13:06
@ezanker Thank you so much for your sample =) That is the exact format that I'm looking for. Like you mentioned I would also like the header image to stretch to fill in the horizontal space. The only thing is the image will have text on it, would stretching the image distort the text? Also I would like the right part to be a fixed length, about 80px. — speedracer2003
– speedracer2003, Commented Sep 15, 2014 at 15:22
@ezanker Also is there a way to get rid off the space on the bottom of the icon on the left hand side? — speedracer2003
– speedracer2003, Commented Sep 15, 2014 at 16:09

ezanker · Accepted Answer · 2014-09-15 16:37:12Z

1

You can use some absolute positioning to achieve the desired look:

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

.has-right-radio a {
    margin-right: 80px !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding-top: 20px;
    padding-bottom: 0;
}
.headerImage {
    position: absolute;
    top: 0;
    left: 80px !important;
}
.has-right-radio a p {
     white-space: normal  !important;
}
.right-radio {
    position: absolute;
    top: 0px; bottom: 0px; right: 0px;
    width: 80px;
    border: 1px solid rgb(221, 221, 221);    
}
.has-right-radio li:first-child .right-radio {
    border-top-right-radius: 5px !important;
}
.has-right-radio li:last-child .right-radio {
    border-bottom-right-radius: 5px; !important;
}
.right-radio p {
    position: absolute;
    top: 20px; bottom: 4px; right: 4px; left: 4px;
    white-space: normal  !important;
}

Here is a DEMO

NOTE: if the header image contains text within the image and you want it to stretch to fit the current width of the LI, this will distort the text...

answered Sep 15, 2014 at 16:37

ezanker

24.7k1 gold badge23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

speedracer2003 Over a year ago

Thank you so much for your help =) One last question. How would I format the LI to only shrink horizontally to a certain length. For example right now in the jsfiddle example if you pull the vertical bar to the right, the images start overlapping. Can this be prevented?

ezanker Over a year ago

@speedracer2003, you could apply a min-width to the UL: jsfiddle.net/ezanker/y41zcz6w/2

Collectives™ on Stack Overflow

Formatting Jquery Mobile Listview item with CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related