[Resolved] Repositioning Toolset Map with results on the left and map on right

[Author]

Posts

[JasonW6419]

Hello!

I am trying to reposition the toolset map on my page within the view using the CSS editor within the View and/or adding directly to the Loop Editor. I have not been able to call the map to move it where I want. Basically, I want the search results on the left hand side of the page taking up exactly 50% width, and the map on the right side taking up the remainder, while also being fixed position.

Uploaded is an example of how i want the view to be displayed.

Thanks so much in advance!

[Beda]

You can use a Grid Block and insert to the left a View that produces the results to display (on the right) in the Map.
This can all be done in Toolset Blocks without Coding.

If you use Classic Views, you will need Custom HTML code to achieve this.

The Grid Block is available if you use Views or Blocks Plugin.

[JasonW6419]

Hi Beda,

I am using an Elementor page to display results, not Toolset. Also, I am using a bootstrap 4 grid to display results. Could I not use the Custom CSS editor or edit within the Loop Editor itself to achieve this? (i.e., is there any alternative way to do that?)

Thanks

[Beda]

I understand.

You can, of course, add HTML and CSS to the Loop Editor, creating 2 Divs that provide the columns, one and place the map in the left columns, the loop of the view in the right (or where you need it)
But there is no visual aid to create this in classic Views.
Only Custom HTML and CSS would let you achieve this result.

I really would suggest trying out Blocks editor here, because it has the tools to do exactly what you want.

If you prefer proceeding with Views, you'd have to study the Bootstrap HTML structures and create an adequate column HTML markup, that holds the Maps shortcode in the View loop editor in one column, and the Loop results in another column.

This means, hours of work against a few minutes clicking options. I suggest giving the blocks a quick try before you dive into the classic HTML approach

[JasonW6419]

Okay, I understand what you're saying now. I still haven't found an article on how to do this with the new blocks. Do you by chance know of an older thread with this issue resolved?

Thanks so much

[JasonW6419]

My issue is resolved now. Thank you!