javascript - 在模态中居中对齐 react-datetime
问题描述
我正在构建一个允许用户选择日期和时间的模式。我正在使用react-datetime 组件。
这是我的代码:
<div className="date-time-modal">
<div className="date-time-modal-container">
<div className="date-time-modal-button">
<Button onClick={this.handleCloseModal} type="noborder">
<Icon name="window-close" size={"2x"} />
</Button>
</div>
<div className="date-time-modal-title">
"Please select date and time:"
</div>
<div className="date-time-modal-calendar">
<DateTime input={false} />
</div>
</div>
</div>
还有我的造型:
.date-time-modal {
position: fixed;
z-index: 1;
padding: 5%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: $ux-theme-color-modal-brackground;
display: flex;
align-items: center;
justify-container: center;
}
.date-time-modal-container {
background-color: $ux-theme-color-template-header;
padding: 20px;
}
.date-time-modal-button {
flex: 1;
text-align: right;
}
.date-time-modal-title {
flex: 1;
text-align: left;
}
.date-time-modal-calendar {
flex: 1;
}
.date-time-modal-calendar * {
text-align: center;
}
每次打开模式时,日历都会锁定在左侧。如果我选择时间选择器,它就会堆积起来。
在当前渲染下方(检查堆叠的时间选择器并全部左对齐):
我需要选择器以父母为中心以及房屋选择器正常运行(小时和分钟除外)。
解决方案
必须使用 react-datetime css 文件正确设置组件的样式。
推荐阅读
- google-cloud-platform - 权限被拒绝(公钥)。- 我无法在 Google Cloud Platform 上登录我的虚拟机
- spring-boot - Spring Boot Jpa“无法调用 sendError()”
- c++ - 在 IBM Rhapsody 中查找活动类销毁完成的时间
- azure-active-directory - Azure B2C 多自定义登录策略
- npm - nexus 中 npm-packages 的快照
- python - 将 XML 文件(带有嵌入的字典)解析为 Pandas 数据框
- qt - QML - 如何将 SVG DOM 加载到图像中
- asp.net-core - 服务器地址中无法识别的方案
- java - 在 bean 'container' 中找到不明确的工厂方法匹配
- django - 在 Django 中返回正确的静态文件 url