Maybe CSS magic possible - moving image components to be on the same row

[Mark_Turrell]

Continuing the discussion from Single Row, Images in different columns —> how to get them to display as an inline list?:

My use case requires the ability to click on the images and expand them (they might be small, etc), so the HTML table approach sadly did not work.
The image carousel works (I am using this now) BUT the users (esp the medical ones) do not like it as they have to swipe to compare things, photo 1 is the result, but photo 3 is how to interpret, etc.

I was looking at a recent post on being able to move Choice components from row by row to be on a single row (for making drop-downs for date of birth). and it occurred to me that it might be possible to have 3 image components… then CSS to put them in the same ‘row’ - with the feature of being able to click to enlarge.

Failing that, the nicest option would be to turn the images in 3 columns on the same row into a usable relationship that Glide will allow me to use as an inline list.

Open to (yet) more ideas! Thanks!

[SantiagoPerez]

Hola @Mark_Turrell

I am not a CSS expert. In fact I was the one who asked for the CSS for the 3 choice component you mentioned.

I got curious about this and gave it a try. You can actually enlarge the images but I don’t know why the 3rd image is not being displayed. Maybe @Manu.n has a better idea on this.

[Manu.n]

Hi @SantiagoPerez
I failed to grow your image to see your CSS but here’s something like that

CSS

<pre><span><style>

/* Img 1 (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) {
display:fixed;
margin-left:17px;
width:110px;
}

/* Img 2 (3eme component) */
div[id*='screenScrollView'] > div > :nth-child(3) {
display:fixed;
margin-top:-110px;
margin-left:133px;
width:110px;
}

/* Img 3 (4eme component) */
div[id*='screenScrollView'] > div > :nth-child(4) {
display:fixed;
margin-top:-110px;
margin-left:249px;
width:110px;
}

</style></span></pre>

[Manu.n]

@SantiagoPerez

Je suis devenu curieux à ce sujet et j’ai essayé. Vous pouvez effectivement agrandir les images mais je ne sais pas pourquoi la 3ème image ne s’affiche pas. Peut-être@Manu.n a une meilleure idée à ce sujet.

It’s good to be curious. Ah I managed to read, just reduce the width

[Manu.n]

with rounded edges it’s prettier, no, oh well!