Ionic 4 responsive grid

Viewed 1417

I need an ion-grid with 3 columns. And the columns with first and last have size of content. In that column i would like to add icon or small image.And the column in center should have large text with overflow:hidden;text-overflow: ellipsis; white-space: nowrap;.

I tried with this code

<ion-grid>
        <ion-row>
            <ion-col size="auto" style="border: 1px solid;">
                image
            </ion-col>
            <ion-col style="border: 1px solid; 
overflow:hidden;  
text-overflow: ellipsis;  
    white-space: nowrap;">
                <div>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 
                  </div>
            </ion-col>
            <ion-col size="auto" style=" border: 1px solid; ">
                icon
            </ion-col>
        </ion-row>
    </ion-grid>

but i can't place the column in middle correctly.it displays in device max width (in separate row).how can i do this?

2 Answers

Try this: Give the middle column a width, and style the div instead.

<ion-grid>
        <ion-row>
            <ion-col size="auto" style="border: 1px solid;">
                image
            </ion-col>
            <ion-col size="4">
                <div style="border: 1px solid; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 
                  </div>
            </ion-col>
            <ion-col size="auto" style=" border: 1px solid; ">
                icon
            </ion-col>
        </ion-row>
    </ion-grid>
Related