Adding columns dynamically in a row

Question

I am trying to display images in one row but I want it to be dynamic where if the screen size changes its does not wrap and display them below but instead displaying a button that redirects to another page... Im not sure how to do this

so far , html:

<ion-row align-items-center>
    <ion-col col-auto>
        <img src="assets/images/image.png" />
    </ion-col>
    <ion-col col-auto>
        <img src="assets/images/image.png" />               
    </ion-col>
    <ion-col col-auto>
        <img src="assets/images/image.png" />               
    </ion-col>
    <ion-col col-auto>
        <img src="assets/images/image.png" />               
    </ion-col>
    <ion-col col-auto>
        <img src="assets/images/image.png" />               
    </ion-col>
    <ion-col col-auto>
        <img src="assets/images/image.png" />               
    </ion-col>
</ion-row>

if screen orientation changes/ smaller screen device (not the desired effect):

the desired effect supposed to be like this:

I know that I have to generate the columns in .ts side but not sure where to start and how calculate the screen width size... or maybe there is a better way to do it... any suggestions ,thanx

Maybe media queries could be used here.

dfsq
– dfsq

2017-04-22 09:56:54 +00:00
Commented Apr 22, 2017 at 9:56 — dfsq
– dfsq, Commented Apr 22, 2017 at 9:56

Duannx · Accepted Answer · 2017-04-22 10:45:29Z

1

First you should add a button to your html:

<ion-row id="myRow" align-items-center style="position: relative; width: 100%; overflow: hidden">
    <ion-col col-auto>
        <img src="assets/images/image.png" />
    </ion-col>
    ...
    <button id="button1" style="display: none; position: absolute; right: 0; top: 0">
       It is your button. It has postion absolute and placed in right top of the row. 
       But it display none now.
    </button>
</ion-row>

In your .ts file, you can check the width of the row and decide show or hide the button:

let row = document.getElementById('myRow');
let width = row.clientWidth;
let button = document.getElementById('button1');
if(width <= xxx){
   button.style.display = "block";
}

Hope this help :)

answered Apr 22, 2017 at 10:45

Duannx

8,9441 gold badge32 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yasir Over a year ago

I decided to go with media screen.... but one thing is not quite working, the overflow is not hidden... I loop 10 items , all of them appear

Duannx Over a year ago

Could you please post your HTML and CSS in a live editor like codepen then i can help you easier?

Collectives™ on Stack Overflow

Adding columns dynamically in a row

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related