CODEWITHSUNDEEP
listviewfirefoxjquery-mobile
CapeCodGal
CapeCodGal

Reputation: 25

jQuery Mobile Listview using Inline / Theme B Showing Wrong Icon on First & Last list items (Firefox)

It seems that if I assign the listview to be inline and use theme a or b then the first and last arrow icons on the list appear in grey instead of the intended color when in the FIREFOX pc browser (mobile firefox seems fine). Sometimes it is both the first and last icon and other times I can refresh and it is one or the other.

I tested the other themes and only a & b seemed to have this display issue with the first & last arrows not being in the right colors, it also only occurs when I use the data-inset=true with those themes. If I remove data-inset then the display is fine.

Is there a way to get around this that anybody has found? I really would like my listview to be inset and using theme b.

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@import url('include/jquery.mobile-1.3.1.min.css');
</style> 
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta id="viewport" name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-touch-fullscreen" content="NO" /> 
<script src="include/jquery-1.9.1.min.js"></script>
<script src="include/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="mobile">
<div data-role="content">

<ul data-role="listview" data-inset="true" data-theme="b">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

</div>
</div>
</body>
</html>

Upvotes: 2

Views: 787

Answers (1)

mara-mfa
mara-mfa

Reputation: 895

This is probably a bug in firefox. What I see is that it is closely related to the border-radius properties in the css. When it is set to 0, the arrow is displayed the correct way.

If you're happy not to use the rouded borders in the first and the last item, simply remove set 

border-radius: 0;

for the following classes:

.ui-first-child
.ui-last-child

in the jquery mobile css.

Another not very nice option is to set them dynamicaly like this:

$(".ui-first-child, .ui-last-child").css("border-radius", 0);

In case you don't want to lose the border radius in the first and the last items, I haven't found the way how to get around this yet.

Just in case - here is the jsFiddle I used to fiddle with - http://jsfiddle.net/n4grz/1/

Upvotes: 1

Related Questions