问react datepicker -datepicker将其他元素推到右边的按钮上，并破坏了我的布局。
EN

Stack Overflow用户

提问于 2022-07-26 12:22:12

回答 1查看 250关注 0票数 0

因此，当我切换react datepicker (当显示datepicker)时，它会将其他元素推到正确的位置，这意味着它会破坏我的布局。我尝试使用css (display: none)来定位__tab-循环类，我也在使用容器上的最大宽度。

我不想让第五个输入被.

屏幕

/* REACT-DATEPICKER  STYLES... */


.react-datepicker-wrapper {
  width: inherit;
}

.react-datepicker-popper {
  z-index: 1000 !important;
}

.react-datepicker-filter {
  height: 48px !important;

}

.react-datepicker__input-container {
  height: 48px !important;
  border: 1px solid #d9d9d9 !important;
  border: none !important;
  border-radius: 4px !important;
  min-width: 198.66px !important;
  max-width: 198.66px !important;
}


.react-datepicker__input-container>input {
  height: 48px !important;
  /* padding: 0px 8px !important; */
  padding: 8px 16px !important;
  color: #000 !important;
  border-radius: 4px !important;
  border: 1px solid #d9d9d9 !important;
  width: 100% !important;
  transition: 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.react-datepicker__input-container>input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #192E49;
}

.react-datepicker__input-container>input::placeholder {
  font-weight: 400;
  font-size: 16px;
  font-family: inherit;
  color: #192e498b;
}

.react-datepicker__input-container {
  height: 48px !important;
}

.react-datepicker__close-icon::after {
  background-color: #bfbfbf !important;
}

.react-datepicker__header {
  background-color: #192E49 !important;
  color: #eee !important;
}


.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  color: #fff !important;
}


.react-datepicker__day-names>div {
  color: #fff !important;
}


.react-datepicker__month-container {
  border: none !important
}

.react-datepicker__day--selected {
  background-color: #192E49 !important;
  color: #fff !important;
}


.react-datepicker__tab-loop .react-datepicker__tab-loop__start {
  display: none !important;
}


/* END OF REACT DATEPICKER STYLES */

{...}

          // * Handle 'date' input
          if (formEl.type === 'date') {
            return (
              <DatePicker
                dateFormat="yyyy/MM/dd"
                isClearable={formEl.value !== '' && true}
                closeOnScroll={true}
                className="react-datepicker-filter"
                locale={tr}
                key={i}
                selected={formEl.value}
                onChange={(dateValue) => handleDateChange(dateValue, i)}
                placeholderText='Kullanıcı eklenme tarihi'
              />
            )
          }

{...]

react-datepicker

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-15 22:32:05

因此，我试图瞄准react-datepicker__tab-loop，但给显示:没有，它使数据报警器完全消失。进一步的实验帮助我找到了这个次优解，它有点混乱了‘三角形’的位置(所以我必须完全摆脱这个三角形)，但成功地阻止了我正在经历的布局变化。

    .react-datepicker__tab-loop {
      position: absolute;
      top: 0;
    }
    
    .react-datepicker__triangle {
      display: none !important;
    }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73123315

复制

相似问题

问react datepicker -datepicker将其他元素推到右边的按钮上，并破坏了我的布局。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react datepicker -datepicker将其他元素推到右边的按钮上，并破坏了我的布局。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react datepicker -datepicker将其他元素推到右边的按钮上，并破坏了我的布局。
EN