CSS Styling a Kanban - изменяйте размер и перемещайте DIV, чтобы соответствовать контенту - PullRequest
Новая
       45

CSS Styling a Kanban - изменяйте размер и перемещайте DIV, чтобы соответствовать контенту

0 голосов
/ 26 марта 2019

Я разрабатывал доску Канбан для общей системы, которую мы поддерживаем в работе.У меня все основные функции работают, но я немного застрял в стиле.На следующем снимке экрана показано, что у меня в данный момент:

enter image description here

Существует основной DIV, который содержит все «столбцы / контейнеры», и это стиль: 

.kanban-board {
    height: calc(100% - 60px);
    width: calc(100% + 20px);
    display: normal;
    padding-bottom: 0px;
    overflow-y: scroll;
}

Этот div содержит серию «контейнеров» - каждый серый столбец, который имеет другой стиль DIV: 

.kanban-container {
    float: left;
    clear: right;
    margin: 20px 10px 0px 10px;
    border-radius: 5px;
    background-color: #eaebed;
    width: 300px;
    padding-bottom: 0px;
    padding-left: 6px;
    min-height: calc(50% - 20px);
    display: table;
}

и, что следует отметить - таких «контейнеров» может быть любое количествопоэтому они в настоящее время переносятся на следующую строку, как показано на снимке экрана выше.Каждый DIV «контейнер» содержит неупорядоченный сортируемый список (UL), и его стиль: 

.kanban-sortable {
    list-style-type: none;
    margin: 0;
    padding: 2px;
    min-height: 30px;
    border-radius: 5px;
    height: 100%;
    width: 285px;
    display: table-row;
}

Если вы посмотрите на скриншот, последний «контейнер» первой строки выходит за пределы (мин)высота остальных контейнеров ... Кажется, пока самый длинный НЕ будет последним в ряду:

enter image description here

Теперь это выглядит просто мусором ...И я понятия не имею, как это отсортировать.Я проверил некоторые другие примеры Канбана, и мой другой вариант - просто перетянуть страницу вправо с помощью полосы прокрутки X - но моя текущая спецификация требует, чтобы я исправил эту проблему.

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

ОБНОВЛЕНИЕ Я испробовал совет, приведенный для использования display: inline-block; (в контейнере .kanban-container) вместо: 

float: left;
display: table;

И трудно понять, исправила ли она мою проблему, так как автоматическое изменение размера «контейнеров» больше не работает

enter image description here

1 Ответ

0 голосов
/ 27 марта 2019

Поскольку вы используете float, вам понадобится контейнер для каждой строки, которая очищает предыдущий. Другим способом было бы удалить float и установить .kanban-container для отображения: inline-block. Если вам нужны свойства таблицы, вам нужно добавить внутренний контейнер, но, честно говоря, меня немного смущают все стили, используемые здесь, и импортеры!, Которые идут с ними. 

<div class="kanban-row">
    <div class="kanban-container">
    <div class="kanban-container">
    ...
</div>
<div class="kanban-row">
    ...

CSS: 

.kanban-row {
    clear: left;
    overflow: hidden; // may not be necessary
}
.kanban-container {
    float: left;
}

или (без рядов): 

.kanban-container {
    display: inline-block;
}
...