Display record data as responsive column cards

[benwhut]

Hi!

Is it possible to display repeating record data (from database) as side-by-side responsive column cards similar to this:

https://www.w3schools.com/howto/howto_css_column_cards.asp

can be responsively resized to this:

I’ve tried to use a Repeating Panel within a Grid Panel, but it still only repeats as a single column (one single stack on top of each other).

The responsiveness is secondary (a bonus). I’m mainly asking if it’s possible to display repeating data as cards horizontally side-by-side.

Am I using the wrong components, is there a property setting I’m missing? Or is this not readily possible with Anvil?

[rickhurlbatt]

Check this out:

Width of Container

Thanks for the suggestions @stucork . The Column Panel does work but as I can see it lacks the left alignment feature. The reason I wanted the Flow Panel is that if you hide the left most Linear Panel, the other two will re-position themselves to the left, this does not happen with a Column Panel. I ended up abandoning this idea of using an XY Panel and used a Grid Panel and then programmatically set the position of the panels if one of the panels was hidden. It seems to work pretty well with …

Or @stucork’s awesome CSS solution

Width of Container

Well that opened up the minefield of css masonry layout… if you don’t mind vertical ordering item 0 item 3 item 6 item 1 item 4 item 7 item 2 item 5 then the same approach with this… .anvil-role-3-cols>div { column-count: 3; -webkit-column-count: 3; column-gap: 3%; -webkit-column-gap: 3%; } .anvil-role-3-cols>div>div { break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%; }

There are a few other ideas in that same thread.

The easiest way I have found is to create a form just the way you want the card to look and then add it programmatically to the container (column panels or flow panels work nicely).

[benwhut]

Thanks @rickhurlbatt for showing me your solution. Looks like there are a few threads in this forum that are already discussing a similar question. I think I just wasn’t using the right search keywords to find them.

Ideally, I would like the cards to be automatically and dynamically created for however many number of records that are returned from the database. Because of this, a Repeating Panel appears to be the most appropriate for this. From looking over the other discussions, I think all I need to do is change the CSS to display the Repeating Panels as a column grid (side-by-side) instead of stacked (one on top of the other). I’ll explore this option and see if I can achieve what I want. If this doesn’t work, then I will look at programmatically adding each card one by one like you suggested.

Thanks again for your help and pointing me to other discussion threads similar to this topic. It would be nice if a learning tutorial were created for something like this since there appears to be a bit of interest in this interface. It certainly is a common UI for a lot of web apps.

[stucork]

this may also be useful - from the component library:

Horizontal Repeating Panel and 2D Repeating Panel

[benwhut]

Hi @stucork. Your component library link is the closest to what I want to do so far, thanks for pointing it out! However, I’m having some trouble getting it to work. This is my first time I’ve added a dependency to an app and I seem to be missing the last step to get it to display my data. All I see is a blank form. This is what I’ve done:

1. add the additional CSS rules that are included at the bottom of the page in your link to my theme.css
2. add the Horizontal Panel app as a dependency in my own app
3. drag the newly added custom Repeating Horizontal Panel component (or TwoDRepeatingPanel component in my case) into my Form
4. add Data Bindings in the component so it knows what data to display.

Step 4 is where I get stuck and all I see when I run the app is a blank form. Normally when I use a Repeating Panel, I can associate an item_template in the properties and then in this template, I can specify the data bindings so the Repeating Panel displays the intended data from the database. But in the case of this added dependency, it does not let me associate an item_template so I can not specify the data bindings that I want. Instead, when I click on the properties of this custom Horizontal Repeating Panel component, it takes me to the added dependency to add data bindings, but when I do this and run the app, the form doesn’t show anything. Can you tell me where I’m going wrong for step 4?

[stucork]

to me it looks like step 4 isn’t possible since the depedency doesn’t give you access to the item_template

I would do step 1.
Skip step 2, 3.
Then add this to your roles

Add a repeating panel - and it should have the above roles to choose from.

[benwhut]

Thanks @stucork! The result of the existing CSS wasn’t what I wanted, but you steered me enough in the right direction for me to style my own CSS and make it work. Once again, thank you for your help!!

[doug.creighton]

I tried the role Suggestion but it still is appearing as just one column. Struggling with this one I’m not great with css

[stucork]

@doug.creighton, given this issue is 3 years old it would be best to start a new thread,
When you start a new thread you’ll see a suggested template to fill out.
The more detail the better.
If it’s useful you should add links to this thread (and any others) as context.

As it stands you won’t get much help on this thread since we don’t know the exact issue you’re facing or what you’ve tried.