Displaying data from a read action in a grid instead of a table

I want to display my data in a grid format instead of a table. Essentially like items in a store or category blog. Using 3 or for columns and displaying data across then down. See the image below.

If it can be done, should I use a connectivity app or an advanced form?

That's what I was thinking. Do I still need the read_data action and if so how do I refer to it in my code? Or do I strictly do this with php in the html view and include code to connect to the database and table/view?

Hi,

advanced form is fine. you need a read data and a repeater.

 In the repeater body you can use either custom html with some php (and css if needed), or a mix of chronoforms grids, etc and custom html and php.

exemple here : https://kafeagora.com/index.php/el/

s.

That is exactly what I'm looking for. Is there anyway to get an example of how that is setup?

you need html with the grid start tag:

<div style="display:grid">

then a loop or repeater with the grid items inside it, you may also use HTML view with PHP and do your own loop

then another html view with the closing tag: </div>

Thought I had replied before, but I'll try again.

I have a HTML view with the grid start tag. I then have a repeater, which is displaying that data I want, Then I have a HTML view with the closing tag.

Now I'm trying to figure out how to get the grid to display in three columns. I'm assuming I need CSS to accomplish this, but having difficulty getting it to work. My repeater is showing the results in one column.

To get something like here : https://kafeagora.com/index.php/el/

Inside your loop put an HTML with php activated.

Copy inside the attached code, and give the look and feel you want with css.

Hope this help

S.

Simelas,

Thank you for sharing. I loaded it, modified the "YOUR CONTENT", and made sure the code referred to the correct repeater. For some reason I'm not getting the content to display in 3 columns. Very frustrating. 

This is what I'm getting. Hopefully you'll have some insight.

Hi,

(you need some css to adjust size etc,...)

In your repeater  select HTML Tag Attributes =>  Add  Custom Tag HTML Attribute

Attribute Name:  class      Attribute Value :  ui stackable grid

Simelas

Thanks once again. We're getting closer... see the attached image. I have also tried this on two fresh Joomla installs. One on the same host and one on a different host and got the same results.

quite strange, as it works "out of the box" in some of the sites i build.

if you need more help pm

Simelas,

Forget the last message. I realized I put the HTML attribute in the wrong spot. Not quite there but closer. See the attached image. It's putting my first three rows of data in three columns, but you can see the last six records are in two columns and three rows. I also would like it to have the columns have equal widths.

Simelas, just realized it's displaying down then across instead of across then down.

First row should be:

Hanshi Chris Malley, Sensei Matt McSain, Sensei Beth Malley

Second row should be:

Sensei Mike Lilley, Sensei CJ Malley, Sensei Mary Lou Padgett

and so forth.

This must be some missing div or similar.

Please try that one and let me know

Simelas,

The second one works perfect.

I was able to get the first one working better, but not exactly as I wanted.

I added to the CSS:

.wrapper {  display: grid;  column-gap: 5px;  row-gap: 5px;  grid-auto-flow: column;}

Then I applied it to the HTML in the loop as an HTML attribute like you had me do previously. That put things in the correct order going across then down, but it wasn't centered and the gaps weren't consistent.

Thank you so much for the help. When I have some time I'm going to take a closer look and see if I can figure out what is missing in the first one.

Here's the first one after adding the CSS.

Here's the results with the second form...

Simela,I now want to make it so when a visitor clicks the picture or name, the person's public profile opens in a modal window. Like your example does. Right now it opens the profile in the same page. 

Thank you in advance.

Hi,

for each "square", you need to setup a link to a new page,  which will open in a modal window with the parameter ( eg id)  related to that square.

simelas.