Imported React component has an unwanted width: 0 div at root and is stopping the component fill the parents CSS grid area

Question

How are we all? CSS noob here.

I have imported google-maps-react and am using it in my project. I am trying to define the space it uses with CSS Grid. However on the DOM when rendered it produces:

<div><-- Map Component--></div>

Like so and the Component tries to take up the space of it's parents div, but unfortunately the outer div is rendering at 0px wide, however the div at the next parent level is my code and is giving the child elements a nice grid-area I want them to fill.

  ...
    return (
    <Map
    google={google}
    initialCenter={location}
    zoom={14}
    containerStyle={props.containerStyle}>
    <Marker
        name={'Name'}
        onClick={onMarkerClick}>
    </Marker>
    </Map>
);
}
export default GoogleApiWrapper({
    apiKey: ('Key'),
  })(MapContainer)

I need the autos as it has a default of using '100%', which takes the window size.

<div style={{gridArea: '2 / 5 / 3 / 6'}}>
    <MapContainer containerStyle={{width: 'auto', height: 'auto'}} />
</div>

Rendered HTML & CSS:

I would ideally like to remove this div altogether, but the google-maps-react source code has been transpiled and so isn't in jsx => hard to read. It might be because when I export the from my custom made component I wrap it in a GoogleApiWrapper wrapper (as per the google-maps-react docs), but it doesn't work without it. I tried looking in the wrapper class but couldn't see anything I could use to help.

I could try and edit the divs contents, or make the useful content divs access the parents parents properties, but i am unsure how. The google-maps-react Map component has style and containerStyle properties, however they pertain to the non problem child elements. I also don't want to calculate the size in code and pass it to the containerStyle if I can help it (although that would work).

Any ideas would be greatly appreciated!

Greg

EDIT:

Okay so I managed to remove the div by editing the modules code. The problem is unrelated to the div!

Consider closing, but may still update once resolved.

Answer 1

I have found the solution. It was to remove the div outer div from the google-maps-react component, by going into the GoogleAPIComponent.js file and finding the lines:

return _react2.default.createElement(
    'div',
     null,
     _react2.default.createElement(WrappedComponent, props),
     _react2.default.createElement('div', { ref: 'map' }));

And change them to:

return _react2.default.createElement(
    _react2.default.Fragment,
    null,
    _react2.default.createElement(WrappedComponent, props),
    _react2.default.createElement('div', { ref: 'map' }));

And then calling the map component like so:

<Map
    google={google}
    initialCenter={location}
    zoom={14}
    containerStyle={{ position: 'relative', width: '100%', height: '100%'}}>
    <Marker
        name={'Name'}
        onClick={onMarkerClick}>
    </Marker>
</Map>

I believe this works because the relative keeps the component in the document flow and so 100% pertains to parent div and not the screen (which happens in absolute) + the blank div no longer causes the size to be lost to the children!

Might suggest a PR

Answer 2

bump, for whoever is having this issue. The problem is still there.I got around it by using this in my styling:

mapArea:{
    height:'70vh', 
    width:'100%',
    "& div:first-child ":{
        height:'100%',
        width:'100%',
    }
},

Answer 3

your problem is that child div is position absolute, while the parent has width auto, auto width will adjust to it's relative content width. try to set width: 100% instead of auto on

<div style={{gridArea: '2 / 5 / 3 / 6'}}>
    <MapContainer containerStyle={{width: '100%', height: 'auto'}} />
</div>

or to flex 1

<div style={{gridArea: '2 / 5 / 3 / 6'}}>
    <MapContainer containerStyle={{flex: 1, height: 'auto'}} />
</div>