Календарь с отображением сетки - вертикальное выравнивание заметок / задач внизу ячейки сетки друг над другом - PullRequest
Новая
       51

Календарь с отображением сетки - вертикальное выравнивание заметок / задач внизу ячейки сетки друг над другом

0 голосов
/ 08 мая 2020

В настоящее время я использую календарь. Я использовал макет сетки для отображения ячеек календарного дня. Я хочу отображать некоторые задачи / заметки разных типов в виде полос в некоторых ячейках сетки. Задачи должны быть выровнены по вертикали по нижней границе ячейки, не влияя на отображение ячейки календарного дня. Ширина полос задач должна соответствовать (касаясь левой и правой границы ячейки) ширине ячейки (100%). Если в ячейке дня более одной задачи (например, 26 мая), они должны быть выровнены одна над другой с зазором между ними 2 пикселя.

enter image description here

Пример кода ниже. Можете ли вы помочь достичь ожидаемого дизайна?

jsFiddle

image

1 Ответ

0 голосов
/ 11 мая 2020

Следующие изменения в конкретной ячейке: 

<div class="day">
<div>26</div>
<div class="task error">Error 1 here</div>
<div class="task info2">Info 2 here<span class="circle" style="padding-left: 7px;">3</span></div>
<div class="task error2">Error 2 here</div>
</div>

и 

    .day {
        /*  position: relative; */
        z-index: 1;
        border-bottom: 1px solid #b9b9b9;
        border-right: 1px solid #b9b9b9;

        /*  text-align: left;
        padding: 16px 20px; */

        letter-spacing: 1px;
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        pointer-events: none;
        user-select: none;

        /* The flex layout will do the trick */
        display: flex;
        flex-direction: column;
    }

    .day > div {
        /* Set size of the container according to the content */
        flex: 0 0 auto;
    }

    .day > div:first-child {
        text-align: left;
        padding: 16px 20px;
        padding-bottom: 0;

        /* To shift the tasks to the bottom of the cell */
        margin-bottom: auto;
    }

приведенная выше модификация CSS сработала для меня, чтобы достичь требуемого макета.

...