使antd modal根据google maps地图的大小展开答案

【问题标题】：Make antd modal expand according to size of google maps map使antd modal根据google maps地图的大小展开
【发布时间】：2019-07-25 20:33:33
【问题描述】：

我有一个简单的 antd 模态，使用 Row 和 Col 网格划分。如果我在一侧放入一些内容，Modal 会根据需要扩展，但在另一侧，我有一张使用 google-maps-react 显示的地图。

这里的问题是，我希望地图有一定的大小，但是当内容很少时，它会溢出模态，看起来很傻。

这是我的代码目前的样子：

export function MyModal () {
  return (
    <Modal>
     <Row>
        <Col lg={12}>
          [MY CONTENT]
        </Col>
        <Col lg={12}>
          <div>
              <Map google={google}
                initialCenter={{ lat: 45.42, lng: -75.69 }}
                zoom={14}
                style={{ width: 420, height: 400 }}
              />
          </div>
        </Col>
      </Row>
    </Modal>
  )
}

MY_CONTENT 不多时，map 溢出模态，看起来像这样：

但是，当我用内容填充模态框的另一侧时，它自然会扩展。所以我不明白为什么地图没有展开它。

无论如何，问题是我怎样才能使模态框的右侧也尽可能地扩展，以便地图适合它？

谢谢！

编辑：我创建了一个code sandbox，以便可以看到 antd 组件。不幸的是，我不知道如何在 SO 的代码 sn-p 编辑器上执行此操作。

【问题讨论】：

你能为此拉小提琴吗？对我来说这似乎是 CSS 问题
我无法让谷歌地图组件出现在沙箱中，但这大致是它的样子：codesandbox.io/s/hello-antd-it8rr?fontsize=14
这可能是地图上的 CSS 定位问题，而不是模态框的问题，因此如果没有示例，很难进行故障排除。如果你知道它应该有多大，你可以尝试给地图的容器一个min-height，或者将它设置为position: relative并给它一个百分比高度，但是你必须调整所有的父容器以及模态.

标签： javascript reactjs google-maps-api-3 antd

【解决方案1】：

原来这是因为我的 Map 组件是一个 iframe。我了解到，在这种情况下，它不会带入自己的宽度和高度，所以父 div 认为它都是 0 或类似的东西。

我的解决方案是在 div 上设置宽度和高度。由于无论如何这在地图上都是静态的，所以这不是问题。所以现在我的代码如下所示：

export function MyModal () {
  return (
    <Modal>
     <Row>
        <Col lg={12}>
          [MY CONTENT]
        </Col>
        <Col lg={12}>
          <div style={{ width: 420, height: 400 }}>
              <Map google={google}
                initialCenter={{ lat: 45.42, lng: -75.69 }}
                zoom={14}
                style={{ width: 420, height: 400 }}
              />
          </div>
        </Col>
      </Row>
    </Modal>
  )
}

【讨论】：