reactjs - react / Material -ui : Make dialog not change when mobile keyboard is brought up

Question

我有一个对话框，其中包含一些文本字段，用户可以在其中提供输入，如下所示。

我遇到的问题是，每当用户单击其中一个文本字段时，移动键盘就会把一切搞乱。它看起来像这样:

我想让对话框保持不变 - 就像这样，它不应该缩小并强制用户向下滚动以查看完整的对话框。我尝试使用 FullscreenDialog 组件，但问题仍然相同 - 移动键盘只是将其缩小并由于某种原因使其可滚动。有什么办法可以解决这个问题吗？

编辑我找到了一种方法来解决这个问题，至少是暂时的 - 将 minHeight 添加到对话框中的 bodyStyle 中，键盘不会覆盖它。显然，您必须向上移动对话框，以便键盘在它出现时不会阻挡它:)

Answer 1

我遇到过类似的问题，但该解决方案可能并不适用于所有情况。

就我而言，主要 <Paper />组件高度设置为window.innerHeight另一个<Paper />其内部组件设置为约 window.innerHeight * 0.6 。我使用这个而不是简单的 CSS 单元“vh”，因为它补偿了 URL 栏。

在嵌套的纸张中，我有一个 <TextField />并且出现了您所描述的相同问题。解决方案基本上是监听 onresize 事件，因为它在键盘打开时触发，然后您只需使用所有这些措施的 maxheight 即可。

为了使其完美，您可能需要尊重设备旋转，因为它确实需要您使用新的高度，当然还要确保组件放置正确。