javascript - React Rodal 不适合模式窗口内的文本
问题描述
我有以下简单的项目StackBlitz
:
https://stackblitz.com/edit/rodal-issue
这种风格:
https://stackblitz.com/edit/rodal-issue?file=src%2FModalWindow%2FModalWindow.less
.modalWindow {
z-index: 1050 !important;
.rodal-mask {
background-color: rgba(13, 54, 69, 0.6);
}
.rodal-dialog {
box-sizing: content-box;
width: auto !important;
max-width: 800px;
border-radius: 12px;
text-align: justify;
padding: 60px;
font-weight: bold;
font-size: 16px;
line-height: 28px;
// maybe we need some extra styling here
// ...
p {
margin-bottom: 60px;
}
@media (max-width: 980px) {
max-width: 100%;
margin: auto 20px;
padding: 40px 20px;
font-size: 12px;
line-height: 24px;
p {
margin-bottom: 20px;
}
}
.rodal-close {
display: none;
}
.button-close {
display: block;
border: 2px solid #2A7DDF;
color: #2A7DDF;
width: 250px;
height: 60px;
border-radius: 50px;
font-size: 24px;
line-height: 56px;
margin: 0 auto;
text-align: center;
text-decoration: none;
}
}
}
正如您在JS
下面的文件中看到的,我正在使用NPM
模块:Rodal
来获取Modal
窗口:
https://stackblitz.com/edit/rodal-issue?file=src%2FModalWindow%2FModalWindow.js
我的问题是渲染不正确(我对Firefox
and感兴趣Chrome
),因为模态窗口不适合内容:
关于如何Rodal
适应任何可变内容(动态大小)的任何想法?
如果您知道一些方法,您可以分叉StackBlitz
上面的项目并将链接粘贴到您的回复中。
提前致谢!
解决方案
推荐阅读
- dart - Flutter 在真机上运行时报错
- ios - 升级到 Xcode 10 + Mac OS Mojave 后无法调试选定的视图
- label - 如何在标签中添加图标?
- angular - 选择器“app-confirm-auto-focus”不匹配任何元素
- python - 在给定的两个元素之间打乱所有元素
- algorithm - 如何仅遍历图中的一个循环?
- string - 从批处理文件中执行 VBScript 时出现字符串问题
- android - Android 应用程序中捕获的图像未保存在手机中
- php - 我想在 php 中调用 ajax 时在表中显示数据
- c - 尝试使用 for 循环查找调和平均值、地理平均值、总和、产品、平均值时出现错误退出