How to move hightline on thumbnail list?


#1

Hi guys,
Can you tell me how i can do it like iOS?
see in screenshort


#2

Working example: http://codepen.io/anon/pen/BNeLqR

List element now looks like this:

    <a ng-repeat="item in items" 
       href="#/{{item.id}}"
       class="item item-thumbnail-left">

      <img ng-src="{{ item.image }}">
      <h2>{{ item.album }}</h2>
      <h4>{{ item.artist }}</h4>
      <span class="filler"></span> 
    </a> 

And this is additional CSS:

/* ADDITIONAL CSS */

.item {
    border-color: #fff !important; /* Match border color to background */
    display: flex !important;
    flex-flow: column;  
}

.filler {
    width: 100%;
    overflow: auto;
    flex-grow: 2;
    margin-bottom: -8px;
    border-bottom: 1px solid #ddd;
}

#3

Thank you!
Im test on browse it work fine, but on iOS simulate is blank filler. How i can fix it?