Mapbox-gl-js: Vuejs + MapBox. Maps it is not rendering when css file it is imported.

[getJv]

mapbox-gl-js version: "mapbox-gl": "^1.4.1",

browser: chrome (lastted)

Steps to Trigger Behavior

1. git clone https://github.com/getJv/learning-mapbox.git
2. cd learning-mapbox
3. npm install
4. npm run serve and go to localhost:8080
5. The maps rendered but without css, like it says at console (This page appears to be missing CSS declarations for Mapbox...)

1. Go to file src/App.vue and uncomment the lines: 29; save it!
2. go back to localhost:8080 an now the css file it is working but the maps it is gone.

1. Go to file src/App.vue and now uncomment the lines: 51-57; save it!
2. go back to localhost:8080 an now the css file it is working but the maps gets all screen size.

Link to Demonstration

I'm unable to replicate it ussing https://jsbin.com/ because it happens only with a Module bundler Instalation

Expected Behavior

Maps working respecting css instructions and anothers html tags and without using local css workarounds

Actual Behavior

pleasse see the section: Steps to Trigger Behavior

[ryanhamley]

Hi @getJv thanks for using Mapbox and the detailed report. In step 7, the map is being instantiated correctly, but I'm guessing that the container isn't being sized properly so if you inspect it, you'll probably see that the height is 0. When you explicitly add absolute positioning and 100% height/width in your CSS, the map resizes. You can try calling map.resize() after initializing, but you may have better luck ensuring that the map's container element is the correct size before the map component is mounted so that the map can fill its container by default. https://github.com/mapbox/mapbox-gl-js/issues/3265 has some discussion of similar issues with React and Vue that may help you debug. Since this isn't an issue with GL JS, I'm going to close this ticket. If you continue to have problems, you can contact Mapbox support or post a question on Stack Overflow.

[getJv]

Hey @ryanhamley Just for keep the solution to anothers developers. Following your advice i tested this css class and everything works?

<style scoped>
.mapboxgl-canvas {
  position: absolute;
  width: 600px; 
  height: 300px;
 }
</style>

Unfortunally i dont know the reason. But it works. Thanks for your time.

[ryanhamley]

Yeah I would expect that to work. It's not terribly flexible though. You'd be better off ensuring that the map's container element is instantiated and sized correctly before instantiating the map. That way the map will just fill the container by default and you can easily make the container any size you need. How exactly to achieve that is beyond the scope of support I can offer through this issue tracker, but I'd recommend reading up on the Vue lifecycle and CSS positioning if you're not familiar with them. Stack Overflow, Mapbox Support and even certain Reddit boards can be very helpful for general how-to questions. Best of luck!