Hey guys,
NOTE The below only happens If you tab in from another. If the code is on the initial tab then the issue does not occur and everything runs perfectly.
I am trying to get my Mapbox map up and running but when I place the embed code inside of a tab bar, the height and width of the canvas is inherited at 400px width and 300px height
. The code in the attached image for mapboxgl-canvas
is auto-generated from the third-party (Mapbox) and when applied in a Codepen, the height and width automatically adjust to fit the window size.
When I bring it into Webflow and place it inside of a tab, the width and height snap to 400px width and 300px height. I know the issue is stemming from the tabs because when I place the embed as the first element under body the map sizes to the window size and it works perfectly, no more 400 x 300.
I checked all of my tabs and I do not have any of them set to these dimensions. Where could they possibly be inherited from? I tried to set the width and height using an !important
tag but the pixels were messed up because the canvas is supposed to automatically fit the area.