Средство выбора даты реакции в диалоге Material ui Отключает средство выбора даты - PullRequest
Новая
       18

Средство выбора даты реакции в диалоге Material ui Отключает средство выбора даты

0 голосов
/ 17 апреля 2020

Привет, у меня есть Datepicker (на основе пакетаact-date-picker) внутри Material ui Dialog.Dialog работает отлично, но когда я нажимаю на DatePicker, он прокручивается вниз, обрезается и показывается прокрутка.

это мой Пример как мне преодолеть это с помощью css

Переполнение прокрутки не может решить проблему, потому что у меня есть элемент списка

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

Вы используете react-date-picker в сочетании с <Dialog> компонентом material-ui, и проблема в том, что указатель даты отображается внутри DOM диалогового окна, поэтому он заблокирован для видимой части диалога.

Основываясь на API средства выбора даты реакции, невозможно изменить элемент для отображения окна выбора даты, поэтому один из вариантов заключается в использовании другого средства выбора даты.

Вы можете использовать компонент выбора материала: 

import DateFnsUtils from "@date-io/date-fns";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import { DatePicker } from "@material-ui/pickers";

<Dialog open={true} aria-labelledby="form-dialog-title">
  <DialogContent>
    <DialogContentText>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used
      in laying out print, graphic or web designs. The passage is
      attributed to an unknown typesetter in the 15th century
    </DialogContentText>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker />
    </MuiPickersUtilsProvider>
  </DialogContent>
  <DialogActions>
    <Button>ok</Button>
  </DialogActions>
</Dialog>

Проверьте это здесь: https://codesandbox.io/s/material-datepicker-inside-dialog-i6wts
Все опции для средства выбора материала можно найти в API документах .

0 голосов
/ 28 апреля 2020

Я исправил проблему. Обратите внимание, что это работает только в некоторых случаях. Потому что проблема отсечения произошла только с первым рядом в моем случае. Вы можете исправить с первым ребенком в CSS

Я применил положение к календарю только тогда, когда он у первого ребенка 

.react-calendar {

position: fixed !important;
top: calc(100% - 479px) !important;

}

, если у вас возникли проблемы, пожалуйста, измените ваш модальный первый . Это происходит только при использовании модального режима.

Я просто новичок в CSS, так что этот пришел первым, и он работал для меня. Спасибо @ Декел

...