Невозможно применить динамическую высоту к элементу div - представление временной шкалы - PullRequest
Новая
       3

Невозможно применить динамическую высоту к элементу div - представление временной шкалы

6 голосов
/ 16 апреля 2019

Я пытаюсь построить горизонтальную шкалу времени. В любой день месяца может быть много событий.

Таким образом, когда событий больше, элементы списка не могут вместить доступную высоту (от: min-height), и появляется вертикальная прокрутка.

Если я пытаюсь удалить min-height, весь контент искажается. Я хочу, чтобы контейнер занимал список любым количеством элементов без вертикальной прокрутки.

Кроме того, есть еще одна проблема, когда окно маленькое (можно увидеть на коде), появляется горизонтальная прокрутка (ожидаемая и необходимая). Но разъем не занимает всю ширину прокрутки. 

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.timeline__container {
  background: #c0ffee;
  overflow-x: auto;
  display: flex;
  position: relative;
}
.timeline__connector {
  position: absolute;
  width: 100%;
  left: 0;
  top: calc(50% - 4px);
  height: 8px;
  background: #ccc;
}
.timeline__item {
  background: gold;
  min-width: 85px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.timeline__item:nth-child(2n) {
  flex-direction: column-reverse;
}
.timeline__up {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline__down {
  height: 100%;
  display: flex;
}
.timeline__month {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  display: inline-block;
}
.timeline__month-up {
  margin-bottom: 20px;
  align-self: flex-end;
}
.timeline__month-down {
  align-self: flex-start;
  margin-top: 20px;
}
.timeline__count {
  margin: auto;
}
.timeline__count-up {
  margin-bottom: 20px;
}
.timeline__count-down {
  margin-top: 20px;
}
.timeline__item-event {
  min-width: 180px;
}
.timeline__event__list {
  height: 100%;
}
.timeline__event__list ul {
  margin-left: 20px;
}
<div class="timeline__container">
  <div class="timeline__connector"></div>
  <div class="timeline__item">
    <div class="timeline__up">
      <div class="timeline__month timeline__month-down">JAN</div>
    </div>
    <div class="timeline__down">
      <div class="timeline__count timeline__count-up">5</div>
    </div>
  </div>
  <div class="timeline__item">
    <div class="timeline__up">
      <div class="timeline__month timeline__month-up">FEB</div>
    </div>
    <div class="timeline__down">
      <div class="timeline__count timeline__count-down">15</div>
    </div>
  </div>
  <div class="timeline__item timeline__item-event">
    <div class="timeline__up">
      <div class="timeline__event__list">
        <div class="timeline__date">5th</div>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
          <li>inventore nihil sint est.</li>
          <li>Lorem ipsum dolor sit</li>
          <li>dolor sit</li>
        </ul>
      </div>
    </div>
    <div class="timeline__down">
<!--       <div class="timeline__count timeline__count-up">5</div> -->
    </div>
  </div>
  <div class="timeline__item timeline__item-event">
    <div class="timeline__up">
      <div class="timeline__event__list">
        <div class="timeline__date">15th</div>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
          <li>inventore nihil sint est.</li>
          <li>Lorem ipsum dolor sit</li>
          <li>dolor sit</li>
        </ul>
      </div>
    </div>
    <div class="timeline__down">
      
    </div>
  </div>
  <div class="timeline__item timeline__item-event">
    <div class="timeline__up">
      <div class="timeline__event__list">
        <div class="timeline__date">25th</div>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
          <li>dolor sit</li>
        </ul>
      </div>
    </div>
    <div class="timeline__down">      
    </div>
  </div>
</div>

Codepen для того же

Ответы [ 3 ]

7 голосов
/ 20 апреля 2019

У меня возникла идея объединить flex и grid для достижения того, что вы ищете.

Добавлен фрагмент кода, и я постарался сохранить код максимально чистым, добавил комментарии к некоторым из них, чтобы код мог говорить сам за себя. Не изменил структуру DOM вообще. Но подождите, посмотрите на это:

Кроме того, есть еще одна проблема: когда окно маленькое (можно увидеть на коде), появляется горизонтальная прокрутка (ожидаемая и необходимая). Но разъем не занимает всю ширину прокрутки.

Чтобы решить вышесказанное, я обернул .timeline__container в .timeline__wrapper. удалено position: relative; из .timeline__container. И добавил position: relative; к .timeline__wrapper.

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

Также я добавил небольшое отступление на классы шкалы времени вверх / вниз, чтобы игнорировать визуальный конфликт с соединителем (или серой линией)

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

Почти забыл упомянуть, это отлично работает и на сафари.

Наконец, фрагмент: 

* {
  /* you can ignore the pseudo elements here */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.timeline__wrapper {
  position: relative;
  /* to fix the timeline connector */
}

.timeline__container {
  background: #c0ffee;
  overflow-x: auto;
  /* element with an overflow can't display an absolute positioned element, that's why the wrapper up there */
  display: flex;
}

.timeline__connector {
  position: absolute;
  width: 100%;
  left: 0;
  top: calc(50% - 4px);
  height: 8px;
  background: #ccc;
}

.timeline__item {
  background: gold;
  min-width: 85px;
  justify-content: center;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  /* this keeps the upper and lower portion same height */
}

.timeline__item:nth-child(2n) .timeline__down {
  /* these styles reverses the expected rows */
  grid-row-start: 2;
  grid-row-end: 1;
}

.timeline__up {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
}

.timeline__item:nth-child(2n) .timeline__up {
  align-items: flex-start;
}

.timeline__down {
  display: flex;
  align-items: flex-start;
  padding: 10px;
}

.timeline__month {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  display: inline-block;
}

.timeline__month-up {
  margin-bottom: 20px;
  align-self: flex-end;
}

.timeline__month-down {
  align-self: flex-start;
  margin-top: 20px;
}

.timeline__count {
  margin: auto;
}

.timeline__count-up {
  margin-bottom: 20px;
}

.timeline__count-down {
  margin-top: 20px;
}

.timeline__item-event {
  min-width: 180px;
}

.timeline__event__list ul {
  margin-left: 20px;
}
<div class="timeline__wrapper">
  <div class="timeline__container">
    <div class="timeline__connector"></div>
    <div class="timeline__item">
      <div class="timeline__up">
        <div class="timeline__month timeline__month-down">JAN</div>
      </div>
      <div class="timeline__down">
        <div class="timeline__count timeline__count-up">5</div>
      </div>
    </div>
    <div class="timeline__item">
      <div class="timeline__up">
        <div class="timeline__month timeline__month-up">FEB</div>
      </div>
      <div class="timeline__down">
        <div class="timeline__count timeline__count-down">15</div>
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">5th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>inventore nihil sint est.</li>
            <li>Lorem ipsum dolor sit</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
        <!--       <div class="timeline__count timeline__count-up">5</div> -->
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">15th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>inventore nihil sint est.</li>
            <li>Lorem ipsum dolor sit</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">

      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
    <div class="timeline__item timeline__item-event">
      <div class="timeline__up">
        <div class="timeline__event__list">
          <div class="timeline__date">25th</div>
          <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>dolor sit</li>
          </ul>
        </div>
      </div>
      <div class="timeline__down">
      </div>
    </div>
  </div>
</div>

Обновление: Добавлено больше элементов для просмотра в соответствии с комментариями.

1 голос
/ 19 апреля 2019

min-height не учитывает высоту дорожки горизонтальной прокрутки.

Следовательно min-height + height of horizontal scroll = vertical overflow.

Я не уверен, как вы хотите справиться с этим, но вот две идеи:

  1. Попробуйте переместить правило min-height из элементов в контейнер и установить достаточно высокое значение, чтобы очистить дорожку прокрутки. 

    .timeline__container {
    background: #c0ffee;
    overflow-x: auto;
    display: flex;
    position: relative;
    min-height: 250px; /* new */
}

    пересмотренная демоверсия

OR

  1. Подумайте о добавлении нижнего отступа для решения проблемы. 

    .timeline__container {
    background: #c0ffee;
    overflow-x: auto;
    display: flex;
    position: relative;
    padding-bottom: 10px; <--- add this
}

    исправленная демоверсия

    Однако этот метод вызывает появление цвета фона более крупного контейнера. Если вы можете сопоставить их, переключитесь на background-color: gold в коде выше.

    исправленная демоверсия

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

Вот объяснение: Расширить фоновый цвет до области переполнения

1 голос
/ 16 апреля 2019

Одной из проблем, которые я обнаружил, которая нарушает ваш макет, является ul. его контейнер (который является .timeline__up) должен иметь собственную полосу прокрутки. 

.timeline__up {
  /* your existing styles... */
  overflow: auto;
}

Надеюсь, это поможет.

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

Похожие темы

...