Loading...

Search jQuery

Search

jQuery Forum

vpxavier

[solved] Since Beta 1: custom icons are overlapped or covered by text in lists

in jQuery Mobile • 11 years ago

Hello,

I am using this code:

<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="#page1">page1</a><img src="images/icons/icon1.png" class="ui-li-icon"/></li>
<li><a href="#page2">page2</a><img src="images/icons/icon2.png" class="ui-li-icon"/></li>
<li><a href="#pag3">page3</a><img src="images/icons/icon3.png" class="ui-li-icon"/></li>
</ul>

But on both Chrome and Android, my icons are now under or over the text in the lists.

This problem appeared with Beta 1.

Thanks for your help

EDIT: I just opened an issue at Github: https://github.com/jquery/jquery-mobile/issues/1890

1

Replies(1)

vpxavier

Re: [solved] Since Beta 1: custom icons are overlapped or covered by text in lists

11 years ago

The solution is to move the image inside the <a> tag:

<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="#page1"><img src="images/icons/icon1.png" class="ui-li-icon"/>page1</a></li>
<li><a href="#page2"><img src="images/icons/icon2.png" class="ui-li-icon"/>page2</a></li>
<li><a href="#pag3"><img src="images/icons/icon3.png" class="ui-li-icon"/>page3</a></li>
</ul>