Mapbox map loading but not showing

I am trying to load a Mapbox map. However the map loads but not showing.
I have tried the exact same code in a blank pure html page and a blank react.js template and the map functions properly.

Component did mount:

<div id="map_test" style={{width: "100%", height: "100%"}}></div>


mapboxgl.accessToken = <MY-TOKEN>
var map = new mapboxgl.Map({
  container: 'map_test',
  style: 'mapbox://styles/mapbox/streets-v11'

index.html (in the head tag):

  <script src=''></script>
  <link href='' rel='stylesheet' />

And that’s the result of the map:

Note I have tried to load the map using CDN and either using npm package, both didn’t work.

Try to inspect what is there, maybe it is rendered somewhere else? If it is a cordova plugin it can be behind the body, etc.

There was collision with CSS properties . My fault and I fixed it.

Hey, I’m having the same problem. Can you recall how you fixed it?

Really not something related to F7, an issue that was in my code that was fixed.

Mine’s not related to F7 either, sorry if I wasn’t clear enough. You mentioned something about conflicting CSS. Do you remember what properties you changed to get it working?