Search code examples
react-datepicker

react-datepicker - datepicker pushing other elements to the right on toggle and messes up my layout

So when I'm toggling the react-datepicker (when the datepicker is shown) it pushes other elements to the right meaning that it messes up my layout. I tried targeting __tab-loop classes with css (display: none) I'm also utilizing max-width on my container.

I don't want the 5th input to be pushed by react datepicker...

Screens

enter image description here

enter image description here


/* 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'
              />
            )
          }

{...]
Solution

  • DatePicker component has a prop for this - enableTabLoop:

    <DatePicker
    ...
    enableTabLoop={false}
    ....                   
/>