Frustrated with variable width grids/lists

ionic-v1
1

Hi All,

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?

Thanks, David

2

did you tried to use the grid classes on the 1st, 3rd and 4th columns?

3

Yes but for example, the grid (.col) classes only allows a single col fixed (which is about 23px wide or percentages and I want 100px, not 20% or anything else.

I’m thinking my only solution is to ditch the ion-list completely and write everything custom HTML… If this is the case, then it seems a HUGE flaw in Ionic!