Map height issue

202
2
Jump to solution
01-06-2022 11:01 AM
Fox71
by
New Contributor

Hello All,

I am very new here and just starting to understand some concepts.

I am trying to develop a map and create a custom navbar at the top (probably using bootstrap). The problem is whenever I had a container at the top, my map extends below the page fold (I believe because the height is based on the viewport), and some scrollbars are added. I'd like to have the map just fit the space available on the screen once the navbar is added at the top. Here is a simple example using a paragraph block at the top:

https://codepen.io/Fox71/pen/abLjdyJ?editors=100

I have been stuck there for a while, any help would be great.

Thnaks!

Ben

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

You'll need to adjust some css to handle your layout.

You can look at flexbox for example.

I wouldn't apply it directly to the body, but would a container instead. This is how you can do it with the body.

 

body {
    display: flex;
    flex-direction: column;
}

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor II

You'll need to adjust some css to handle your layout.

You can look at flexbox for example.

I wouldn't apply it directly to the body, but would a container instead. This is how you can do it with the body.

 

body {
    display: flex;
    flex-direction: column;
}
Fox71
by
New Contributor

Thanks a lot, that put me on the right track! Perfect!

0 Kudos