Skip Navigation

[Resolved] Grid & Map Search Layout

This support ticket is created 5 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 20 replies, has 2 voices.

Last updated by Pete 5 years, 5 months ago.

Assisted by: Luo Yang.

Author
Posts
#1293537

No, the map_height="100%" attribute won't work, as the document I mentioned above, this attribute accepts a number with a unit.

#1293543
See here in Map Views.png

The whole point is to have the map 'fill' the area to the right as mentioned right at the beginning.

The list may end up being about 4 rows before pagination, sometimes it may be less.

When you're setting this up in Views, it says you can use %.
I've seen another support ticket saying use VH.
https://toolset.com/forums/topic/make-map-size-dynamic/

None 'seem to work?

#1293575

There isn't such a built-in feature within Toolset Maps plugin, you might consider custom JS/CSS codes, for example, this thread is based on Bootstrap:
https://stackoverflow.com/questions/27295617/how-to-get-google-map-to-fill-div-with-bootstrap

Since your website isn't using Bootstrap, and it are using Elementor editor in your website, I suggest you check if it is possible to with Elementor supports:
hidden link

#1293601

Hmmm ok.

I was doing this in Elementor first and then going to 'try' and replicate the layout using Gutenberg.

Is Gutenberg or Toolset blocks bootstrap to offer this flexibility?

See this site: hidden link

The map is a set height, when you scroll the map stays fixed, the left scrolls. This possible?

#1294311
map-height.JPG

I have checked again the URL you mentioned above:
hidden link

It is setup the map DIV height as below:

.map--full {
    height: calc(100vh - 70px);
}

So you can try to setup the map shortcode as below:
[wpv-map-render map_id="my-map" map_height="calc(100vh - 70px)"][/wpv-map-render]

And test again, it works fine in my localhost, see screenshot map-height.JPG

#1295881

My issue is resolved now. Thank you!