search

visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.88k stars 1.35k forks source link

Inherit parent height in`mapboxgl-children` div #2132

Closed martpet closed 1 year ago

martpet commented 1 year ago

The new 'mapboxgl-children' div brakes styling for those who depend on the default height of 100% of the parent div. Adding height: inherit to the new div solves the issue.

Pessimistress commented 1 year ago

Can you give an example of when this makes a difference?

martpet commented 1 year ago

An example is when there is a child with a height in percentage of the parent height.

Of course, one could wrap the child with a div with ‘position: absolute; height: 100%’, since the ‘mapboxgl-children’ div has ‘position: relative’. In this case, I agree, my pull request is not needed.

For me, the layout broke, because my child has ‘height: calc(100% - (100vh - 100dvh))’

Pessimistress commented 1 year ago

Thanks. For CI to pass, you need to run yarn lint fix at project root to apply prettier styles.

Guidogl commented 1 year ago

This PR causes map to have a child div which is empty even when child component is not provided.