Frustrated with variable width grids/lists

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

    <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 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>

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

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

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!