Webflow Tabs and CSS inheritance

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.

Hi @moofawsaw, thanks for the post. Could you help to share the read-only link? Share a read-only link | Webflow University. That will help a lot.

Thanks in advance!

Hey Dave,

Here is the read only below. For test I have hidden my site content and tried adding a new tab menu under body without any classes. The issue persisted.

It looks a little messy but if you resize the window the map will go full width. Also if you take it out of the tab bar and have the site published then the map will load in at full width.

http://kyle-s-amazing-site-wohoo.webflow.io/

https://preview.webflow.com/preview/kyle-s-amazing-site-wohoo?preview=1049efc55c0c6d3ebdbf263e1920a3d4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.