I’m assuming the goal here is to place about four elements side by side… not necessarily more. It’s worth noting that those elements might not even come from the same column or table.
1 Like
@nathanaelb How would you go about doing it with a collection so that it looks clean on both mobile and desktop 4 wide?
Using a Card Collection XS on mobile makes the 4-wide layout look good, but it feels awkward on many other screen sizes.
I would have done it exactly how you did it.
1 Like
I see, that definitely works well, if it fits the OP’s needs, then they should go ahead and try the card collection, but if you’re aiming for precision, it’s not quite ideal.
1 Like
The thing is, one might be able to achieve the same visual result in the layout editor with a collection on the one hand and with a few components side by side on the other hand.
In the data editor however, those two scenarios are different. In the first case we’re talking about displaying items from a table and possibly displaying them via a relation. In the second case we’re talking about display attributes of a single item via components. This discrepancy has to do with database architecture. Working with a solid database architecture is important long term: scalability, maintainability, performance, etc.
Pixel perfection with CSS is fine. But I still seems to me that CSS on a container with multiple columns would be bandaid masking the real problem which may be a database not structured correctly. Once the database is structured correctly, if CSS is possible on collections, then nothing prevents applying CSS to the collection to enhance the display.
1 Like
I’d like to suggest an alternative solution: with a properly structured database, we can fill that remaining gap in our design using only HTML… no CSS required. By leveraging a JavaScript column to feed a joined list of images, we’ll achieve truly “pixel perfect” output with no CSS, just as originally described.
-
Replace P1 with a comma separated list of images
-
Add a Rich Text Component to your layout and target the JavaScript Column
JavaScript
if (!p1) return '';
const urls = p1.split(',').map(u => u.trim());
const pieces = [];
for (let i = 0; i < urls.length; i += 4) {
const rowMargin = i > 0 ? 'margin-top:12px;' : '';
pieces.push(
`<div style="${rowMargin}display:flex; flex-wrap:nowrap; justify-content:space-between; gap:12px; width:100%; box-sizing:border-box;">`
);
for (let j = 0; j < 4; j++) {
const idx = i + j;
const url = urls[idx] || '';
const opacity = url ? '1' : '0';
pieces.push(
`<div style="position:relative; background:#1f1f1f; border-radius:10px; overflow:hidden; padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; width:260px; height:100px; box-sizing:border-box; white-space:nowrap; opacity:${opacity};">` +
`<div style="position:absolute; top:0; right:0; width:100%; height:100%; background:#212121; clip-path:polygon(100% 0, calc(100% - 80px) 0, 100% 80px); z-index:0; opacity:${opacity};"></div>` +
`<img src="${url}" alt="image${idx + 1}" style="position:relative; z-index:1; max-height:60px; max-width:60px; object-fit:cover; border-radius:50%;" />` +
`</div>`
);
}
pieces.push(`</div>`);
}
return pieces.join('');
Oh that’s a nice approach. It uses code so I personally would stay away from it.
Do you mean the avatar picture is not centered vertically in the card? That would deserve a bug report.
To circumvent the bug, how about creating a custom collection? Perhaps the bug is not there in a custom collection.
Actually, I’m referring to the fact that it doesn’t sit evenly across all screen sizes. A four-column container stays evenly spaced on desktop. If you try my sample app, you’ll see it’s always four-wide on any screen size. Whether you use CSS or a dynamic JavaScript solution, you can achieve a consistent layout across breakpoints. Do you have an example of what you’re seeing using Glide native components?
I just sent a request to access your app.
1 Like
No worries… I’ve made the app public
1 Like
Maybe in your demo you could use the different methods and with a text component indicate what we are seeing.
1 Like
Updated with four methods: JavaScript, 4-column container with CSS, 4-column container without CSS, and native Card Collection Size XS.
In the sample app above, which of these four methods do you prefer for handling layout adjustments across different screen sizes?
Funny how this whole thing started because @adamjyo missed a period at the start of his code. Classic developer moment… one missing dot and suddenly we’re in a 3-hour debugging saga, questioning life choices and whether semicolons are secretly out to get us.
Proof that in coding, punctuation marks have more power than they should.
2 Likes
just to save face, I had copied and pasted with the the . several times and the one time I screen shot…
1 Like
also, my brothers name is Eric, so this is not new for me LOL
1 Like
Hehe. Were you able to get something working in the end?
how do I only show a collection of the four writers per song, when pulling from either a list of 1900 songs, or 48 writers? You’re right this will be the ideal solution if I can figure it out.
Could you share a couple of screenshots of your layout and data setup? How are writers linked to songs?
this is a table with songs, the last four columns are linked to the writers table with artist info. I can get the collection to show writer 1 for every song, but not the writers for an single row
Hmmmm ok. If it were me I’d set up the Writers table with two columns: Writer Name and Song ID. Then create a multiple relation from Song ID in the Songs Table to the Song ID in the Writers table. Use that relation as the source for the card collection.
Strike that