2

I am trying to get my mapboxgl map to fit the entire size of the screen but it's restricted to a third of the screen. We are building an angular app with carbon.

We think there may be a problem with the 'bx--content' restricting the child components from fitting the entire screen because of default padding however I tried to override this and manually set the padding: 0; but I had no luck there. We've already implemented the map.resize functionality and I can see on the console that the map is changing size when I make the browser window smaller and larger but it's not "fitting" the entire screen

Anybody know what i'm doing wrong?

Map i'm trying to resize to fit browser Code for resizing map

TylerH
  • 20,799
  • 66
  • 75
  • 101
NV90
  • 19
  • 4

1 Answers1

0

Check the CSS rules applied to the map element and each of it's parent elements to make sure it can stretch to fill the screen.

This can help to achieve this: Make a div fill the height of the remaining screen space

Extra tip: if you add this styling to your map element and your map now fits the entire screen, your problem is probably CSS-related:

display: block;
position: absolute; 
top: 0;
bottom: 0;
width: 100%;
Nick VN
  • 322
  • 3
  • 5