map height = calc(100vh - 73px)

This support ticket is created 5 years, 9 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/Karachi (GMT+05:00)

Tagged: Toolset Maps, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by romanB-3 5 years, 9 months ago.

Assisted by: Waqar.

Author

Posts

April 2, 2019 at 11:55 am #1224436

romanB-3

Hello,
In order to have the map full height, I set up a map height of calc(100vh - 73px), which works ok.
Still, the container of the map still is 100vh, so I got a page higher than its actual content.
How could I correct this ?
Thank you.

April 2, 2019 at 12:51 pm #1224459

Waqar

Hi Roman,

Thank you for waiting.

During troubleshooting, I noticed that the vertical scroll bar on the page is not showing because of the map, but it is the result of two instances of inline "height:100vh;" styles.

Screenshot 1: hidden link
Screenshot 2: hidden link

Instead of adding inline height styles, you can include a special class "matchPageHeight" to these two div tags and add the following custom CSS code in the view's "éditeur CSS":


@media only screen and (min-width: 768px) {
.matchPageHeight {
  height: calc(100vh - 73px) !important;
}
}

Note: To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

regards,
Waqar

April 2, 2019 at 1:46 pm #1224491

romanB-3

My issue is resolved now. Thank you!