[3.1] Display fetched results in a HTML5 table

[3Di]

I am fetching a DB table using a foreach loop and assigning to the template the results with template->assign->block_vars. So far so good. The issue lies where I would like to show the results in the HTML as a table content, 3 columns and rows defined just by the size (count)of the fetching results. Using CSS and HTML5 and TWIG.

I mean, each row must contain the next ID contents. Which I can see but as a list, like memberlist.

Imagine the memberlist divided in three rows (every row an user ID contents).
Does anybody have a good example to link me to? Using a template event here. FWIW.

The matter is clear, at least IMO. If more info are needed please tell me, though.

Edit: here's a mockup of what I would like to achieve, numbers are User_Id's content.
Perhaps I used the words "rows" instead of "columns", just to be clear.
.

.
I am using the TWIG syntax: {% for blah_group in loops.blah_group %}

Thx IA. Consider please I am kind of a noob about templating.

[kasimi]

I think what you want is a CSS flex layout.

Code: Select all

.container {
	display: flex;
	flex-wrap: wrap;
}

.container .item {
	flex-grow: 1;
	width: 25%;
}

Also see the answer and the link to a JSFiddle example here: http://stackoverflow.com/questions/2419 ... ns-per-row

[3Di]

Kasimi, thanks for your interest. Seems crystal clear to me,
I will just remove those child rules because I already have an own rule for that.
I haven't yet tested that, just at a first glance though it seems really what I am looking for.

More to follow.
Regards.

[3Di]

Wow, I didn't know the power of CSS Flexbox, amazing I can say.
I got my time and studied it before to try and use it, it was interesting and like all the stuffs you don't know, a bit hard to get in touch, also because of language, but hey.. definitely a must.

I sat up an external page to test the whole thing, used this basic code for the "loop to grid/table" stuff.

Code: Select all

<!-- INCLUDE overall_header.html -->

<style type="text/css">
.container {
	display: flex;
	flex-wrap: wrap;
}
.container .item {
	flex-grow: 1;
	width: 33%;
}
</style>

<div class="container">
	{% for group in loops.group %}
		<div class="item">
			<img src="{{ group.AVATAR }} alt="">&nbsp;<a href="{{ group.PROFILEURL }}" class="username">{{ group.PERSONANAME }}</a>
		</div>
	{% endfor %}
</div>

<!-- INCLUDE overall_footer.html -->

No more tables any more, uses Twig and the result is what I was looking for, ofcourse now I have to prettify the output using the already available CSS classes taken from the main site (Dev zone).

Here's a screenshot of the first rough page, no style applied yet.
Is pretty "adaptive", responsive will be after the fine-tuning.
.

.
Thanks Kasimi, once more.

[3Di]

Now I have the urge to "span 3 rows in a cell", so to speak, using flexboxes.

I searched and read the "whole" internet I can say, no love.

The issue is:

in the image I above posted we have the AVATAR on the left side and the PERSONANAME on the right side aligned to left. OK. I need to put right down the "group.PERSONANAME ", on new lines, other 2 fetched fields, say "group.APPLES" and "group.BANANAS". Those vars have to be aligned to the first one, leaving the AVATAR standing alone.

Any thoughts?

This is the last piece of my puzzle, then a new cool extension will be ready to see the light of the sun.

[canonknipser]

Maybe it's worth a try to use css tables for the "inner part"?

See:
https://github.com/canonknipser/viewexi ... tml#L9-L18
and
https://github.com/canonknipser/viewexi ... ewexif.css
as an example

[javiexin]

Maybe wrap the second group (the three spans) in a div, and you are done .
Or use a single span with different paragraphs (p tags).

[3Di]

Thx guys, the nººb is at works.