Mapbox map loading but not showing

Questions
1

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:

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

ComponentDidMount:

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='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />

And that’s the result of the map:

2020-02-23_07-51-22
2020-02-23_07-51-22360×640 1.72 KB

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

2

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.

3

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

4

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

5

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

6

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?