Nano Hash - криптовалюты, майнинг, программирование

Angular ngx daterangepicker z-index

У меня есть несколько форм в расширении, и я использовал этот код для выбора даты,

<mat-form-field>
  <input formControlName="date" matInput placeholder="Dátum" type="date">
</mat-form-field>

Что отлично работает, расширение не скрывает этого (посмотрите), но то у меня были начальные и конечные значения для даты и времени, поэтому я переключился на ngx материал daterangepicker.

Моя единственная проблема в том, что расширение скрывает указатель диапазона дат (посмотрите), поэтому указатели диапазона дат код выглядит так:

      <mat-form-field>
        <input
          matInput
          ngxDaterangepickerMd
          name="daterange"
          placeholder="Choose date"
          applyLabel="Okay"
          startKey="start"
          endKey="end"
          firstMonthDayClass="first-day"
          lastMonthDayClass="last-day"
          emptyWeekRowClass="empty-week"
          lastDayOfPreviousMonthClass="last-previous-day"
          firstDayOfNextMonthClass="first-next-day"
          [autoApply]="options.autoApply"
          [linkedCalendars]="options.linkedCalendars"
          [singleDatePicker]="options.singleDatePicker"
          [showDropdowns]="true"
          formControlName="date"

          [showWeekNumbers]="options.showWeekNumbers"
          [showCancel]="options.showCancel"
          [showClearButton]="options.showClearButton"
          [showISOWeekNumbers]="options.showISOWeekNumbers"
          [customRangeDirection]="options.customRangeDirection"
          [lockStartDate]="options.lockStartDate"
          [closeOnAutoApply]="options.closeOnAutoApply"
          [opens]="opens"
          [drops]="drops"
          [timePicker]="timePicker"
        />
      </mat-form-field>

Я попытался задать ему собственный z-индекс, например:

.md-drppicker {
  z-index: 9999;
}

ngx-daterangepicker-material {
  z-index: 9999;
}

Но это не решило проблему, тоже попробовал возиться с отображением / положением, но я не могу это исправить.
Есть идеи, что не так?

Изменить: Вот лучшее изображение проблемы выбора диапазона дат

angular css date-range z-index ngx-daterangepicker-material
17.04.2020

  • Вы когда-нибудь находили решение, как заставить это отображаться с более высоким z-индексом, чтобы оно не было скрыто в области прокрутки? Я имею дело с проблемой того же типа в нашем приложении. Мы попытались использовать Renderer2, чтобы поднять его на более высокий уровень, который работал с дисплеем, но затем он нарушает все ожидаемые пользователем функции нажатия. Это означает, что каждый щелчок пользователя по календарю, кроме числа даты, приводит к закрытию календаря. Спасибо за любой вклад. 19.10.2020

Ответы:


1

Вам нужно использовать атрибут переполнения, так как для календаря нет места. Думаю, это решит вашу проблему.

.md-drppicker {
  z-index: 9999;
  overflow: auto; // also try overflow-y;
}

ngx-daterangepicker-material {
  z-index: 9999;
  overflow: auto; // also try overflow-y;
}

Я бы посоветовал вам прикрепить экземпляр stackblitz, если проблема не исчезнет.

19.04.2020

2

Я использую версию ngx-daterangepicker-material 2.4.1 на Angular 6.1.10.

Проблема для нас заключалась в использовании MatInput и angular-split-ng6.

Исправление css для нашей реализации было следующим

.md-drppicker.drops-down-right.ltr.shown.double.show-ranges {
    position: fixed;
}

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

19.10.2020
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..