Раскладка всплывающего окна с датчиком угловых отметок вызывает переполнение - PullRequest
Новая
       44

Раскладка всплывающего окна с датчиком угловых отметок вызывает переполнение

0 голосов
/ 19 мая 2018

Я использую Angular uib datepicker, импортирую его с помощью nocsss, и когда я разбиваю на страницы, он кратко показывает два календаря перед изменением размера.Я попытался добавить overflow: hidden к table в средстве выбора даты, но это делает весь указатель даты невидимым.Зеленый квадрат - это временная кнопка, которая показывает и скрывает указатель даты.Почему это рядом, это отдельная проблема.

Broken datepicker

my scss: 

.datepicker-container {
    :global {
      button:not(.uib-title) {
        cursor: pointer;
      }

      .uib-datepicker {
        //max-width: 238px;
        //overflow: hidden; -> this makes the entire datepicker invisible
        table {
          margin: 0 auto;
        }
      }

      .uib-right,
      .uib-left {
        height: 20px;
        background: $some-blue;
      }

      .uib-title {
        text-align: center;
        width: 100%;
      }

      .uib-day {
        padding: 0;
        transition: all 200ms linear;
        cursor: default;

        button {
          height: 24px;
          width: 100%;

          &:disabled {
            color: $some-grey;
            opacity: 0.75;
            cursor: not-allowed;
          }

          &.active {
            background: $some-blue;
            border-radius: 50%;
            color: white;
          }
        }

        &:hover {
          color: $white;
          background: $some-blue;
        }
      }

      .text-center {
        text-align: center;
      }

Во время отладки я использовал отладчик chrome, чтобы прервать модификацию поддерева, и он появляетсяпроблема, конечно, с внутренностями календаря.Загружается в следующем месяце, , затем удаляет узлы предыдущего месяца, что не имеет смысла, но хорошо.Это означает, что на короткое время видны оба месяца.Поэтому, если я сделаю это, решит некоторые проблемы: 

          td {
            &:nth-of-type(8),
            &:nth-of-type(9),
            &:nth-of-type(10),
            &:nth-of-type(11),
            &:nth-of-type(12),
            &:nth-of-type(13),
            &:nth-of-type(14) {
              display: none;
            }
          }

В основном 1-7 тд - это следующий месяц, а 8-14 - предыдущий месяц, когда угловые шоу показываюткоротко перед удалением.Мы можем скрыть их вот так, но это решение хрупкое.Если вы быстро щелкаете по календарю, он мигает и расширяется, как в примере.

...