[Resolved] Elementor : Grid view bug – Toolset View Widget

[Author]

Posts

[florianS-13]

Hello,

I have created a Toolset View with Blocks and would like to use it in Elementor.

If I drag the widget into a section, the formatting is completely lost and the "tiles" are displayed one below the other.

I found the same problem in the forum.
However, it says there that the problem has already been resolved.
There was a workaround for the meantime.
But with this workaround, a responsive view no longer works.
https://toolset.com/forums/topic/elementor-grid-view-bug/

As soon as I use the view in the normal Gutenberg editor, everything works fine, including the responsive view.

For this project i could switch to the Gutenberg Editor.

But we are planning further and larger projects with Toolset and I need to know whether the integration actually works.

Because in larger projects, we don't want to work with custom CSS in so many places when it is actually a basic feature.

Elementor:
hidden link

Gutenberg:
hidden link

[Minesh]

Hello. Thank you for contacting the Toolset support.

We do not have tight integration with Elementor but we would like to and we are working on it. With the next release, are are going to fix many issues with the view widget of Elementor.

However, as you mentioned the you would like to have a larger project, I suggest you should for now switch to Gutenberg Editor and after the next release, once we publish the fix for Elementor view widget, you should review it and start using it. I hope it makes sense.

[florianS-13]

Hey Minesh,

that sounds great! I really love toolset and an even better compatibility with Elementor would be amazing.

The funny thing is that Elmentor is now adopting the design on the desktop. I haven't changed anything. However, the mobile version cannot be used. It does not take into account the responsive attitude.

I found the other workaround.
Is there an addition that mobile devices are also addressed?
Then I don't have to rebuild all pages in Gutenberg.

.js-wpv-loop-wrapper > .tb-grid {
    grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr);
    grid-auto-flow: row;
} 

found here:
https://toolset.com/forums/topic/elementor-grid-view-bug/

Thank you!

[Minesh]

The thing is that you shouldn't be placing blocks based views inside the Elementor builder's content. If you wants to insert views inside the elementor content you should be using the classic views. I hope this will be improved with the future release and hopefully fix will be added.

To make the output responsive, you should wrap the CSS code inside a media query as needed. For example:

@media screen and (min-width: 992px) {
.js-wpv-loop-wrapper > .tb-grid {
grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr);
grid-auto-flow: row;
}
}

You can adjust the code as per your requirement.

[florianS-13]

My issue is resolved now. Thank you!