Angular ion-item repeat with 2 different href And CSS Positioning

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”).

enter image description here

Using ionic and angular , i have done something like this:

enter image description here

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.

Code:

<ion-list>
<ion-item ng-repeat="case in cases" class ="item-text-wrap" 
href="#/tab/cases/case-detail/{{case.ID}}">

<table style="width:80%; float:left;">
<tr>
    <td><strong>DoorID: </strong></td>
    <td style="padding:3px">{{case.DoorCode}}</td>
</tr>
<tr>
    <td><strong>Address: </strong> </td>
    <td style="border-spacing:3px">{{case.Address}}</td>
</tr>
<tr>
    <td> <strong>Remark: </strong></td>
    <td style="padding:3px">{{case.Remark}}</td>
</tr>
<tr>
    <td><strong>Status:</strong></td>
    <td style="padding:3px">{{case.Status}}</td>
</tr>
</table>

 <div class="second" style="width:15%; float:right;">
<input type="image" style="width:50%; z-index:999;" src="img/icon_play.png"
  onlick="#/tab/requests">
 </div>

  </ion-item>
</ion-list>

Steps Taken To Resolve:

For the 2 different links (for the list and button):
I tried, to specify the links in the inside the ion-item from how to make a cell of table hyperlink to no avail. (table cannot be clicked)

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”

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.

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.

Would appreciate any guidance and help. Thanks!!


Source: css

Leave a Reply