中心对齐模态内的react-datetime

时间:2018-06-08 23:08:24

标签: javascript html css reactjs react-datetime

我正在构建一个允许用户选择日期和时间的模式。我正在使用react-datetime component

这是我的代码:

<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;
}

每次打开模态时,日历都会锁定在左侧。如果我选择时间选择器,它就会堆叠起来。

在当前渲染之下(检查堆叠的时间选择器和所有左对齐):

enter image description here

enter image description here

我需要将选择器置于父级和小型选择器的中心以正常运行(小时和分钟)。

1 个答案:

答案 0 :(得分:0)

我在this post

得到了答案

必须使用react-datetime css文件正确设置组件样式。