[Closed] Elementor and Toolset View. View Is showing vertically instead of horizontally.

[Author]

Posts

[JasonS5894]

I have a view that works on the original home page. It just shows the 3 most recent posts in a vertical bar.

WHen adding the same view to elementor it still filters the 3, but it puts them horizontal down the page.

[Nigel]

I'm not sure what the difference is between "vertical" and "horizontal down the page".

Do you have links to pages showing the difference? I can use the browser inspector tools to see what markup is involved that accounts for the difference.

What editor did you make the View in (using Blocks, or the legacy editor)?

How did you insert the View into Elementor? Using the Toolset View widget?

[JasonS5894]

My settings are to have the view go 4 columns across. It works on a normal page that I created with Toolset. When I created a page with elementor and added the Toolset View widget it changes to one column and goes 4 as rows instead of 4 across as columns.

[Nigel]

It sounds like Elementor interferes with the CSS rules that Toolset uses to lay the items out in columns, but I can't tell without having something to look at.

Do you have links to the pages where it is and is not working so that I can compare?

[JasonS5894]

This is the view of how its supposed to look.
hidden link

and this is what it is doing when adding with Elementor

hidden link

[Nigel]

Thanks for that.

I've been studying the two side-by-side and it's proving difficult to spot just what in the case of Elementor is breaking the grid layout.

I can see from the markup how you've created this, so I'm going to recreate it on a local test site where I can debug it more effectively, and I'll get back to you.

Thanks for your patience.

[Minesh]

Nigel is on Vacation today. He will get back to you tomorrow as soon as possible.

[Nigel]

Sorry for the delay getting back to you.

When reproducing the set-up on my own test site I could more readily see the underlying cause, whereby some of the dynamic styles from the View created with the Block editor are not added to the front-end when inserting the View via Elementor rather than directly on a page.

I checked the internal developer tickets and see we already have plans to improve the integration with Elementor (and a handful of other page builders) for content created with Blocks, and we'll work on that in the next dev cycle (the current cycle is nearing completion and is just pending completing testing). That means it may still be a few months before completion, though.

In the meantime, you could add specific CSS to such pages (to replace the missing style rules). In the case of that particular page, I think it would be sufficient to add the following rule to fix the broken grid:

.tb-grid {
  grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr);
}

(That's based on your having 4 columns for the grid.)