search

alex3165 / react-mapbox-gl

A React binding of mapbox-gl-js
http://alex3165.github.io/react-mapbox-gl/
MIT License
1.93k stars 536 forks source link

Canvas doesn't fill container when using react-split #774

Open matsomo opened 5 years ago

matsomo commented 5 years ago

Probably related to #395

Context I'm using react-split to create two drag-able panels, a list to the left and a details and map container to the right. The right panel is also divided using react-split between the details and the map.

Problem The canvas width doesn't fit the width of the canvas-container, even tho the canvas-container is filling its parent. Resizing the window makes the canvas fit the container.

I reckon this is probably due to the nested use of react-split, but I can't seem to find a good solution and am in need of help. My current solution is to run map.resize() in onStyleLoad when the component mounts, but this of course is pretty noticeable when the map suddenly snaps into place. I'm passing a containerStyle with height and width set to 100%

I recreated my structure with the issue here: https://stackblitz.com/edit/split-within-split-mapbox-not-resizing-1c46pw

robhawkes commented 4 years ago

Hitting a similar issue. Did you get anywhere with this? Curious on the solution you took.

bflemi3 commented 4 years ago

I found that setting a height of 100% on the map container component (the immediate child of the Split) fixed the issue for me.

Since the height of the immediate children of Split are being calc'd, without an initial height on the map's container, the map canvas calculates its height from its initial rendered height (100% of its parent). Once the height of the container is "re-calc'd" by Split the canvas doesn't adjust.