title: Angular ion-item repeat with 2 different href And CSS Positioning
body: <p>I been trying to do something like this, where clicking on the list links to a different address("#/tab/cases/case-detail/{case.ID}") and clicking on the play button goes to another address("#/tab/requests/{case.ID}"). </p>
  
  <p><a href="https://i.stack.imgur.com/buIc5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/buIc5.png" alt="enter image description here"></a></p>
  
  <p>Using ionic and angular , i have done something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/CJk1Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CJk1Z.png" alt="enter image description here"></a></p>
  
  <p>As you can see, it has horribly gone wrong. The "end of list line" was above the contents. It was fine till i have to insert the 2nd play button in every list contents.</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;ion-list&gt;
  &lt;ion-item ng-repeat="case in cases" class ="item-text-wrap" 
  href="#/tab/cases/case-detail/{{case.ID}}"&gt;
  
  &lt;table style="width:80%; float:left;"&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;strong&gt;DoorID: &lt;/strong&gt;&lt;/td&gt;
      &lt;td style="padding:3px"&gt;{{case.DoorCode}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;strong&gt;Address: &lt;/strong&gt; &lt;/td&gt;
      &lt;td style="border-spacing:3px"&gt;{{case.Address}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt; &lt;strong&gt;Remark: &lt;/strong&gt;&lt;/td&gt;
      &lt;td style="padding:3px"&gt;{{case.Remark}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;strong&gt;Status:&lt;/strong&gt;&lt;/td&gt;
      &lt;td style="padding:3px"&gt;{{case.Status}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
   &lt;div class="second" style="width:15%; float:right;"&gt;
  &lt;input type="image" style="width:50%; z-index:999;" src="img/icon_play.png"
    onlick="#/tab/requests/{case.ID}"&gt;
   &lt;/div&gt;
  
    &lt;/ion-item&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p><strong>Steps Taken To Resolve:</strong></p>
  
  <p>For the 2 different links (for the list and button):
  I tried, to specify the links in the  inside the ion-item from <a href="https://stackoverflow.com/questions/10070232/how-to-make-a-cell-of-table-hyperlink">how to make a cell of table hyperlink</a> to no avail. (table cannot be clicked)</p>
  
  <p><strong>Even if the list was properly displayed, using z-index will not help as pressing on the play button will direct to ion-list's "#/tab/cases/case-detail/{{case.ID}" instead of "request"</strong> </p>
  
  <p>For the css position:
  My reasoning was to float the table left and the "second" div right. But something has gone wrong and I do not know why. I do not have enough experience to solve this.</p>
  
  <p>I know that using in-line css is not recommended, this is just the testing phase, will migrate all to stylesheet when it's done.</p>
  
  <p>Would appreciate any guidance and help. Thanks!!</p>
  
  <p><strong>Update1</strong>: Changing the height to cover the whole list item and clicking on it , still doesn't work as it covers the whole area.(including the buttons)</p>
  
  <p><a href="https://i.stack.imgur.com/OG68K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OG68K.png" alt="enter image description here"></a></p>