Relative Map Height

This topic contains 4 replies, has 2 voices, and was last updated by  Kor 4 years, 12 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • March 24, 2020 at 8:32 am #536426

    Andreas Putlitz
    Full Member
    Post count: 50

    Hi! So, what I am trying to achieve is to have the map widget stretch vertically the entire height of a column or container. However, when I set the map height to a % value, it doesn’t work anymore.

    How can I achieve a relative height for the map widget, and make it stretch to automatically fill the contraints of a container?

    Cheers!

    March 24, 2020 at 9:35 am #536437

    Kor
    Moderator
    Post count: 16516

    Hi Andreas Putlitz,

    Thanks for your post. May I know where can I see the map and also, could you highlight it using screenshots of what you’re trying to achieve there?

    March 24, 2020 at 5:29 pm #536535

    Andreas Putlitz
    Full Member
    Post count: 50

    Hi Kor, thanks for the quick reply.

    I wanted to use a floating sticky container to display the map. For this I would have needed the map to fill the container to 100%.

    I found a workaround, where I use vh instead of % for the map height, and make the map inself sticky. Works just as well.

    One question though: For the map height, can I use something like “100vh – 100px”? I have tried, put it didn’t work.

    The reason would be, that I want the height of the map to be 100% of the viewport MINUS the height of the header.

    Thanks for your help.

    March 24, 2020 at 5:36 pm #536538

    Andreas Putlitz
    Full Member
    Post count: 50

    Got it!

    It’s calc(100vh – header height in px)

    March 24, 2020 at 7:52 pm #536566

    Kor
    Moderator
    Post count: 16516

    Hi Andreas,

    Glad that you sorted it out. Have a nice day!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount