Check out this CSS playground for experimentation: https://www.bootply.com/HHeQ3n0EbT
https://i.sstatic.net/WVUpI.png
<div class="container">
<div class="row">
<div class="col ltg-column-parent">
Column
<div class="ltg-column-inside">
<div class="task-box">
content
</div>
<div class="task-box">
content
</div>
<div class="task-box">
content
</div>
</div>
<div class="task-table-bottom-buttons">
<button>+</button>
</div>
</div>
<div class="col ltg-column-parent">
Column
<div class="ltg-column-inside">
<div class="task-box">
content
</div>
</div>
<div class="task-table-bottom-buttons">
<button>+</button>
</div>
</div>
<div class="col ltg-column-parent">
Column
<div class="ltg-column-inside">
<div class="task-box">
content
</div>
</div>
<div class="task-table-bottom-buttons">
<button>+</button>
</div>
</div>
</div>
</div>
CSS:
.ltg-column-parent {
margin: 1px;
padding: 0;
background-color: lightgray;
padding-bottom: 1rem;
}
.ltg-column-inside {
background-color: rgb(151, 151, 151);
height: 100%;
/* border: white solid 1px; */
}
.task-box {
width: 10rem;
height: 6rem;
color: black;
background-color: white;
border: 1px solid lightgray;
border-left: 7px solid yellow;
padding-left: 1rem;
padding-top: 1rem;
display: inline-block;
}
.task-table-bottom-buttons {
position: relative;
bottom: 0px;
}
This project involves creating a kanban table where tasks can be created and moved between columns.
- The columns have a light gray background.
- The dark gray div is where task boxes reside or can be dragged.
However, there are some issues in the design. The dark gray box with the "+" button is extending beyond its parent light gray div because it is set to height: 100% to utilize all available space. Removing this causes the dark gray div to shrink, limiting the space for tasks.
To address these challenges, we aim to achieve the following:
- Ensure columns have equal heights only when placed next to each other (not necessary if stacked).
- Position the "+" button at the bottom of the last task or the entire column.
- Optimize the size of the dark gray div to allow ample space for dropping tasks without artificially altering the column height.
What steps should be taken to rectify these display issues?