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.