CODEWITHSUNDEEP
cssjquery-mobile
user1204493
user1204493

Reputation: 184

How to remove the bottom list view line separator JQM 1.4.5

I'm trying to get rid of the bottom listview line separator. The css I used worked fine in jQM 1.3.2, but in 1.4.4, it works to remove all of the separators from the list except the one on the bottom. The original solution came from here: earlier solution

I have a list of 4 items:

<ul data-role="listview"  data-corners="false"  id="indexList">
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li><br>
</ul>

CSS applied to the list:

 #indexList.ui-listview li {
    width: 85% !important;
    margin: 3% !important;
    padding-bottom:1%;
    float: left;
    border: 1px solid #ccc !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
    background: rgba(0,0,102,.85) !important; 
    font-weight:500 !important;
    text-shadow:none !important;
}

CSS to remove the list view separator line:

.ui-btn-inner
{
    border-width: 0px;
}

I've also tried border-bottom: none;

TIA for any help offered.

Upvotes: 0

Views: 80

Answers (1)

Arpit Vasani
Arpit Vasani

Reputation: 1023

border is added to anchor tag so the code will be as following.

.ui-listview li a.ui-btn{
    border: none;
}

Upvotes: 1

Related Questions