[Resolved] Building a search view inside a grid block

[Author]

Posts

[Luciana]

Hey there! I'm currently trying to integrate Toolset with Elementor. I've created a custom Search and following your tutorial to style it.
https://toolset.com/course-lesson/creating-a-custom-search/?utm_source=plugin&utm_medium=gui&utm_campaign=blocks#style-the-search-box-and-resultsI'

I'm currently unable to put the Search elements inside de grid cells. They move either on top or below the block
As if it wasn't a possibility. Therefore, my styling is impossible!

[Jamal]

As discussed during the chat, please reproduce the view/elementor issue here hidden link

Thank you for your collaboration.

[Luciana]

Hi Jamal,
Thanks for all your support.

I managed to replicate the issue on the link provided.
On the Loop, I'm trying to split search and results in separate columns. On Elementor --> Content --> Custom Search I select: "include only the search form" on the 1st col and "include only the search results" on the 2nd one.
But as you can see, in the 2nd column both search + results are being displayed, nonetheless.

I hope is of value and can get solved soon.
I'm sending a screenshot, too.

Saludos, Luciana

[Jamal]

Thank you Luciana for your collaboration. I'll escalate this issue to our 2nd Tier for another evaluation before getting to the developers. And I'll keep you updated about it.

As a workaround, you can add the search form and the view using shortcodes inside of two Text Widgets. Assuming that the view name is "Product Search View", you can add the form with the following shortcode:

[wpv-form-view name="Product Search View" target_id="self"]

And add the results part with the following shortcode:

[wpv-view name="search-books" view_display="layout"]

You can check how I did it on this page hidden link
hidden link

[Luciana]

Thanks, Jamal you're the best. I'll try that out in the meantime.

[Jamal]

Awesome. We have also published a known issue about it for other users https://toolset.com/errata/elementor-view-widget-for-split-views-doesnt-work-properly-for-block-based-views/

Hopefully, this will be fixed in an upcoming release. Let us know if there is anything else we can help with.

[Luciana]

Thanks, Jamal for your help.

Well, I've been applying the workaround you suggested by loading the data via shortcode instead. That seems to be working well. However, now the 3 columns grid is not displaying. Is there any documentation available on how I could style the grid directly through the code?

[in the img, the 3 col display view and how is showing atm]

Thanks, Luciana

[Jamal]

Hello Luciana,

What if you use Bootstrap grid, which is built using CSS classes. You can choose which version to use in Toolset->Settings->General(tab). Read more about the Bootstrap grid here hidden link

Otherwise, build the view using the legacy editor, which you can also activate in Toolset->Settings->General(tab). You can use blocks for the template of the view's loop.

I wanted to check the first case on your website, but the provided username/password did not work for me. If you want me to give it a try, please update the first message of the thread with working credentials, or add them to your next one, which will be private.

[Jamal]

Thank you. However, the user does not have enough permissions to edit the page or to access Toolset menus. Check this screenshot hidden link

[Luciana]

Ooops… my bad, Jamal. I'm sorry. I forgot to set the permissions back to this user. It's done now. 🙂

[Jamal]

Thank you. Now, I have the needed permissions. However, I wonder if we are talking about the same page hidden link
Because from my side, the results are displayed in a 3 columns grid. And the styles from Toolset Blocks are correctly applied. Check this screenshot hidden link

Am I missing something?

[Luciana]

Yes, you're on the right spot. The problem arises when trying to display the view in two separate columns.
To do so, I'm now using the shortcode workaround you provided me above –since Elementor's View widget is still not working properly. So, the moment I call in the view to display the results:

 [wpv-view name="Product Search View" view_display="layout"] 

I get the results in 1 col, not respecting the grid from the original view hidden link. Just like in the picture I attached above.

Any thoughts?

Thanks,
Luciana

[Jamal]

Hello Luciana,

I wonder if this is what you want to achieve hidden link
Because the page is built only with blocks, I was able to wrap the Search form and the results in a columns(30/70) block. Check this hidden link

Then, I tried to use the results parts and the search parts in an Elementor page here hidden link
And I was able to reproduce the issue, the results are not displayed in a grid anymore. hidden link

When the view is added to the Elementor page, it is generated with a different CSS class, and the styles that will ensure the grid are not enqueued to the Elementor page. This is the styles that ensure the grid layout:

.wpv-view-output[data-toolset-views-view-editor="1ebb77bead211ad6a4f1d38acdf50fc8"] .js-wpv-loop-wrapper > .tb-grid {
    grid-template-columns: minmax(0, 0.33333333333333fr) minmax(0, 0.33333333333333fr) minmax(0, 0.33333333333333fr);
    grid-auto-flow: row;
}

When the view is split using shortcodes, the results are rendered in a div with the class "wpv-view-layout" instead of "wpv-view-output" and the styles are not added to the page at all.

I wonder if the design that I produced with blocks is a viable solution for you? hidden link