Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Listview ui-li-has-thumb small image example not working #7886

Closed
kevgrig opened this issue Dec 28, 2014 · 2 comments
Closed

Listview ui-li-has-thumb small image example not working #7886

kevgrig opened this issue Dec 28, 2014 · 2 comments

Comments

@kevgrig
Copy link

kevgrig commented Dec 28, 2014

Documented example:

<li class="ui-li-has-thumb">
  <img src="smallimg.png" style="max-width:16px; max-height:16px;">
  List item with small image on the left
</li>

Not working with 1.4.5 (JSFiddle):

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page">
    <div role="main" class="ui-content">
      <ul data-role="listview">
        <li class="ui-li-has-thumb">
          <img src="http://www.famfamfam.com/lab/icons/silk/icons/sport_soccer.png" style="max-width:16px; max-height:16px;">
          List item with small image on the left
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

Related to issue #6321 @jaspermdegroot and noticed issue #7123 is also not fixed @arschmitz
@arschmitz
Copy link
Contributor

@kevgrig This is not a bug your markup is incorrect ( you are correct the upgrade guide is wrong, #7123 ) however the demos show the correct markup, http://demos.jquerymobile.com/1.4.1/listview/#Icons:16x16, and here is your jsfiddle corrected http://jsfiddle.net/7maL9a8d/1/

The problem is your not adding a thumb your adding an icon icons do not require a class on the li they just need to be 16x16 and have the class ui-li-icon on the image.

Im going to close this issue and open on on the jquerymobile.com repo to fix this jquery/jquerymobile.com#111

@kevgrig
Copy link
Author

kevgrig commented Jan 9, 2015

@arschmitz Thanks.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@arschmitz @kevgrig