[Resolved] Search filter and view on two separate areas with Elementor preserving styles

[Author]

Posts

[Luciana]

Tell us what you are trying to do?
As stated in my last (unsolved) thread:
https://toolset.com/forums/topic/building-a-search-filter-and-view-on-two-separate-areas-with-elementor/

I'm building a search view with its results, which will be shown in 2 separate areas: one for the search-filter form and the other for the results. Results will show in a 4-columns view. The entire website is being developed by blending Toolset with Elementor.

Since the known issue:
https://toolset.com/errata/elementor-view-widget-for-split-views-doesnt-work-properly-for-block-based-views/

I've used the workaround:
[wpv-view name="Products" view_display="layout"]

However, the items were not displaying correctly as it did not respect the column view.

From the support team I was advised to use the following workaround for it:
"It Appears that the css for our view isn't being loaded properly when its inserted onto the page when using elementor. We can workaround this by using the following custom css.

.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;
}
"

This 'solution' worked partially. At the moment, columns are displayed. However, the view styles aren't… I tried on different browsers and emptied the cache, just in case.
My guess is it must be something really simple at this point, and somehow styles might be crushing each other. I'm okay with using workarounds. However, I'm sure you'll understand I would like a solution that doesn't break.

Could you help me with it or suggest any other solution?

Thanks in advance,
Luciana

---
What is the link to your site?
hidden link
Under construction, you'll need access to it.

[Luo Yang]

Hello,

I can login into your website with credentials of your previous thread:
https://toolset.com/forums/topic/building-a-search-filter-and-view-on-two-separate-areas-with-elementor/#post-2331957

And I have tried the URL you mentioned above:
hidden link

You are using Elementor editor to design above page, and display a view block, it will conducts unexpected result, since Toolset Blocks plugin is based on WordPress built-in Blocks editor, which is a different page builder from Elementor, it is not recommended to use two page builders to design the same page, see our document:
https://toolset.com/course-lesson/using-toolset-with-elementor-page-builder/#Limitations-when-using-Elementor

In your case, I suggest you try to use Blocks editor to design that page, just like you did before in below page:
hidden link

[Luciana]

Thanks, Luo Yan.

Well, as you could see, I have done it that way. However, by doing so I'm missing some other things I'd like to add via Elementor. Also, tbh, however much I love Toolset, I'd rather use Elementor to style the entire view, rather than Toolset's Editor.

Is there any other way I can do that?

[Luo Yang]

You can setup the post with with classic editor:
https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

Then use view's shortcodes in Elementor editor to display the search form and search results.

[Luciana]

I was already using both the legacy and Blocks interface. However, even if I select the first option (use only legacy interface), I don't get those options like the ones in the example https://toolset.com/wp-content/uploads/2021/11/toolset-views-legacy-editor-2.png

Am I missing something? Thanks,
Luciana

[Luciana]

Ok, it seems to act differently by reloading and building it from scratch.

I'll try that and see how it goes, I'll let you know. Hope it solves the issue.
Thanks,

[Luo Yang]

Please update here if you need more assistance for it, thanks

[Luciana]

Thank you! Thanks for your time, Luo Yang. I'll continue on this path.