Skip Navigation

[Resolved] Make view grid output right aligned

This support ticket is created 3 years, 1 month 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
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 2 replies, has 2 voices.

Last updated by martinE-4 3 years, 1 month ago.

Assisted by: Waqar.

Author
Posts
#1922555
Screen Shot 2021-01-28 at 4.42.25 PM.jpg

Tell us what you are trying to do?
I'm trying to output a grid view and currently it is beginning on the left. I have a 4 column grid but if there is only 1 or 2 entries I would like them on the right. I'm designing a footer, using the block element in GeneratePress Premium and it works well bringing in Toolset fields and views wherever I want them. But for this purpose I need it right aligned

I enclosed a picture showing what I am trying to do. I tried an unformatted view loop output but it still put one logo UNDER the other. I really just want output that puts out the loop items (logos), 1 after the other with no new line, maybe just a couple of spaces. Is there any way to do this with Toolset Blocks?

There might be a way to do it with classical views but I have already built the site using Blocks and I don't think we can use both in the same site can we?

If we can, do you have instructions on how to do this in Toolset Views classic?

#1922627

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Martin,

Thank you for contacting us and I'd be happy to assist.

To achieve this, you can follow these steps:

1. You'll Create your view using the blocks editor in the "Grid" loop style.

2. In the "View" block's "CSS Classes" field, you'll include a special class, for example, "right-aligned-wrapper".
( screenshot: hidden link )

3. Next, in the same "View" block's "Custom CSS", you can include some code to make the grid direction change to "right to left":
( the order of the view's results will also inverse, but you can adjust that through the sort direction option in the view's ordering settings )


.right-aligned-wrapper .js-wpv-loop-wrapper > .tb-grid {
direction: rtl;	
}

On a side note, you can work with classic and blocks based views on the same website, by selecting "Show both the legacy and Blocks interface and let me choose which to use for each item I build" for the editing experience option at WP Admin -> Toolset -> Settings -> General.

regards,
Waqar

#1922645

That CSS and class worked great. I had to define the style in the main theme css customizer with GeneratePress though. For some reason the css box in the view block did not work (although I did try it there several times to be sure). Possibly because I was using this view in an element block defined by GP's theme. In any event all is good now. Thanks again!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.