Environment
- jQuery Mobile 1.3.0
- Ruby on Rails 3.2.12
- Chrome and Firefox latest or close to latest builds (can get exact versions if needed)
- OS X Lion 10.8.2
Problem
Using jQuery Mobile with Rails on the back end, I am getting an odd hover effect for only list view items. The picture below shows what a listview item looks like while hovered on. If I add an icon/button to the right of the listview item, only the left has the issue as shown in the second picture. All other elements with hover effects work fine.
Evidence
Without icon, on hover (listview item):
With icon, on hover (listview item):
With icon, on hover (listview item right icon):
Question
Why, on hover, do my listview items turn an ugly black instead of being the nice hover gradient that everything else seems to handle without issue (including an icon/button on the listview itself)?
Code
The following is my HAML template code for the listview.
%ul{"data-filter" => "true", "data-inset" => "true", "data-role" => "listview"}
- @item.subitem.each do |item|
%li{"data-theme" => "c"}
%a{"data-prefetch" => "", "data-transition" => "slide", href: edit_item_subitem_path(@item, subitem), :rel => "external"}
= item.text
- if item.set
%span.ui-li-count.ui-btn-up-c
✓
And this is what Rails/HAML generates:
<ul data-filter='true' data-inset='true' data-role='listview' data-split-icon='gear' data-split-theme='b'>
<li data-theme='c'>
<a data-transition='slide' href='/items/5' rel='external'>
Testing
<span class='ui-li-count ui-btn-up-c'>
2
</span>
</a>
<a data-theme='c' href='/items/5/edit'>
<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>
</a>
</li>
And here is the resulting "computed" source that jQuery Mobile generates (I left out the search/filter code):
<ul data-filter="true" data-inset="true" data-role="listview" data-split-icon="gear" data-split-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-theme="c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-count ui-first-child ui-last-child ui-btn-up-c">
<div class="ui-btn-inner ui-li ui-li-has-alt">
<div class="ui-btn-text">
<a data-transition="slide" href="/items/5" rel="external" class="ui-link-inherit">
Testing
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">
2
</span>
</a>
</div>
</div>
<a data-theme="c" href="/items/5/edit" title="" class="ui-li-link-alt ui-btn ui-btn-icon-notext ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext">
<span class="ui-btn-inner">
<span class="ui-btn-text"></span>
<span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="gear" data-iconpos="notext" data-theme="c" title="" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext">
<span class="ui-btn-inner">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-gear ui-icon-shadow"> </span>
</span>
</span>
</span>
</a>
</li>
</ul>
Thanks
Thanks in advance, let me know if you need any additional information. Also, I didn't tag this Rails as I don't think it relates to Rails, but if I should, or if it does end up being the root cause, I will tag it as such.
overlay-theme. Post you listview code could help. - Omar