Skip Navigation

[Resolved] display repeteable fields group in a vertical grid

This thread is resolved. Here is a description of the problem and solution.

Problem:
Is it possible to output posts from a View in a grid where the posts go down the columns instead of across the rows?

Solution:
Yes, if you use custom CSS, specifically the column property, as demo-ed here: https://codepen.io/blinkcursor/pen/jRQxzK

This support ticket is created 3 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 6 replies, has 2 voices.

Last updated by culturaI 3 years, 9 months ago.

Assigned support staff: Nigel.

Author
Posts
#1235355

Hello i have repeteable fields group: ANNO - SETTIMANE/ORE - PREZZO

I'm trying to display my repetetable fields group in a grid of 4 columns.
I can manage that correctly using views wizard output.
I ordered my output for "price field"

My grid has this layout:

price1 | price2 | price3 | price4
price5 | price6 | price7 | price8

but i would to obtain this layout:
price1 | price5
price2 | price6
price3 | price7
price4 | price8

basically i would to order my post vertical instead of horizontal

i hope this is clear.

This is possible?
Thanks

#1235417

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi there

For this you could output the results as an unordered list (which is one of the Loop Wizard output options), and then use CSS to create the two columns.

I made a simple demo here to demonstrate: hidden link

#1236407

Hello Nigel and thanks for help. Your example works very good!

It is also appliable to a table? To obtain this result:

FIELD1 PRICE1 | FIELD2 PRICE2 | FIELD3 PRICE3

FIELD4 PRICE4 | FIELD5 PRICE5 | FIELD6 PRICE6

This would be my real goal

#1236851

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

A small number of field types when you insert them give you the option to output them in the format FIELD_NAME: FIELD_VALUE, while for others you would need to manually write the label where you insert the field.

As you are outputting a repeatable field group using a View then to output the data in that kind of format, you are back to what you describe in your initial question, only when you insert the Bootstrap grid you choose 3 columns instead of 4.

When you enter repeatable field groups in the back-end on the post edit screen you can name each instance. If you want to output that name it is actually the post title of the post that acts as a container for the fields, so you can output it using the wpv-post-title shortcode.

I'm not quite sure from your question which bit you are having the problem with, but maybe I have covered it with the above?

#1237035
views table.jpg
views grid.jpg
tablepress.jpg

Sorry Nigel, I explained myself wrongly.
Those I did were just examples, i will be more specific.

I have a repeteable group fields ANNO - SETTIMANE/ORE - PREZZO:
1. Settimane/ore - descrizione - single line text field
2. Prezzo - Numeric field

I would to obtain exactly this:
ATTACHMENT TABLEPRESS (i'm using tablepress plugin)

But using views i obtain this:
ATTACHMENT VIEWS - GRID (toolset views grid output)

or this:
ATTACHMENT VIEWS - TABLE(toolset views table output)

I would to use toolset views without tablepress.

I hope I was clearer.

#1237144

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

OK. Well, you would still want to use CSS columns to achieve this result then.

I've updated the demo I shared earlier to use 4 columns and I added a minimum column width which means if you narrow the browser you'll see it keeps collapsing to use fewer columns when there is not enough width.

#1238653

Perfect, working great. My issue is resolved now. Thank you!