【发布时间】：2021-08-11 08:56:03
【问题描述】：
我有一个模式组件，要求用户输入他们的用户名和密码，但是，当我尝试输入用户名或密码时，我的虚拟键盘弹出，挡住了我正在输入的内容。见下图。我希望能够向下滚动以查看输入字段，但我不能这样做。我不完全确定我应该在哪里添加相关的 CSS 来解决这个问题，但是我的模态 CSS 是在 this file 中定义的，它看起来像这样：
.sr-modal {
@apply fixed top-5 left-6 right-6 overflow-y-scroll overflow-x-hidden
focus:outline-none
ml-auto mr-auto pt-10 pb-5
text-dark
border-2 border-white
bg-dark
shadow-lg
rounded-2xl
z-30;
max-width: 25rem;
}
请注意，我使用的是 TailwindCSS，但这并不重要。另外，请注意我的模态是一个 Vue 组件（也应该没关系）。
如果有人有任何建议，请告诉我！
【问题讨论】：
-
这可以通过以下任何一种方式来实现 (i) 使表格更小 (ii) 将整个表格移到极顶。
-
感谢您的建议。我认为这不是一个好的解决方案，因为我还有其他需要更多信息的模式，所以即使我将它们一直移到顶部，也不足以看到输入字段。我可能会使页面更高，但我认为应该有更好的解决方案
-
如果这些东西都不起作用，那么这可以通过多个数据输入页面来完成。
-
这当然可以通过模态来完成 :)
-
还有一件事：即使我的页面更高，我似乎仍然无法滚动模态本身，即使当模态打开时，我也只能滚动浏览背景页面。如果我能解决这个问题，那么当模式打开时我可以使页面更高，这可能会解决它。
标签： html css vue.js responsive-design