React-map-gl cannot fit within parent

Question

I'm starting to play with react-map-gl. I followed the example in https://github.com/visgl/react-map-gl.

It worked fine. However, the size of the map overflows all the way to the right & bottom of my page. the component is currently inside in a parent div. However i can't seem to contained it within the parent div.

Does anybody know how to do this?

Looks like there might be a solution in a previous post: https://stackoverflow.com/questions/1098219/how-to-make-child-divs-always-fit-inside-parent-div I recommend opening up your browser dev tools and tinker with element styles in a trial & error fashion. — Hyetigran, Jun 28 '20 at 19:35

score 0 · Answer 1 · answered Jun 28 '20 at 13:46

I was trying with below code:

<div className="relative w-full h-full mr-10 pr-10" ref={targetRef}>
    <ReactMapGL
        mapStyle="mapbox://styles/mapbox/streets-v11"
        mapboxApiAccessToken={MAPBOX_TOKEN}
        onViewportChange={handleViewportChange}
        {...viewport}
    />
</div>

I'm using tailwindcss. The map is rendered to fill all the screen. I'm trying to add margin or padding on the right, however it doesn't work. I could add left margin though.

React-map-gl cannot fit within parent

1 Answers1