CODEWITHSUNDEEP
htmlcssionic-frameworkionic2flexbox
peterc
peterc

Reputation: 7863

How to keep all columns in a single ion-row in Ionic >= 2

I have a page in my ionic 2 application where I what a gird of items, where each item takes a single row.

A simplified example can be seen at this plkr

Looking at the first row, I have 3 columns (red, gray, and orange).

enter image description here

I want the first two columns to stay fixed width, and have the last column take up the rest of the row. If the text is too long, I just want it to truncate and show ellipsis (which I do using the style='white-space: nowrap; overflow: hidden;text-overflow: ellipsis

Now, if I shrink the width of the page, the last column moved to be under the other rows....

enter image description here

Is there a way to have this third column stay in the same row, and just show the ellipsis once it runs out of room there (ie like below...)? I have tried everything!

enter image description here

Thanks in advance for any help.

Upvotes: 3

Views: 3243

Answers (2)

Sandeep Sharma
Sandeep Sharma

Reputation: 1885

Try with this solution:

Apply following class to last column:

 .last-col{
        width: 1%;
 }

Reasoning: here we are overriding .col class's width which is specified to be 100 % by the framework and because of this overriding Third col initially gets 1% width of its container and then there comes magic(i.e flex-grow: 1) attribute from the .col class which does all the trick.

flex-grow definition: It tells what amount of the available space (now we have available space because we have only specified/used 4px+ 30px+ 1% ) inside the flex container the item should take up. 

.col {
    position: relative;
    padding: 5px;
    width: 100%; // we are overriding this field
    margin: 0;
    min-height: 1px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

Upvotes: 3

user1752532
user1752532

Reputation:

You probably want to add col-auto to they last col input in the row. REF

<ion-row>
  <ion-col col-1> 1 </ion-col>
  <ion-col col-2> image </ion-col>
  <ion-col col-auto> aaaaaazzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzazazaaaa </ion-col>
</ion-row>

Upvotes: 0

Related Questions