I’ve only been using Ionic for a little while but ran into a design issue which I just can’t work out a solution for.
Basically I’ve got the below Ion-List (grid) and I need the 2nd column (containing the description) to be variable width (and eclipse the text if it’s too long). In the documentation there is no solution since I want the first, third and fourth columns to be fixed width (say 1st Column: 70px, 3rd Column: 100px, and 4th Column 50px) with the 2nd Column taking the remainder of the space (note this will only be display in Portrait mode but I need it to work on the various phone widths).
<ion-list> <ion-item> <div class="row"> <div class="date">26/10/14</div> <div class="description">Tickets to the concert</div> <div class="amount text-right">234.77</div> <div class="ccy text-right">EUR</div> </div> <div class="row"> <div class="date">27/10/14</div> <div class="description">Another expense of some type</div> <div class="amount text-right">34.77</div> <div class="ccy text-right">EUR</div> </div> </ion-item></ion-list>
Normally in CSS I would use the display:table, etc process which works a dream, but I cannot seem to get this to work here as the ion-list/ion-item throws the widths out.
Can anyone please help and thanks so so much in advance as this has been bugging me all day?