To clarify this question, we do not have to provide a CSS-only solution. We are open to using JavaScript in our data-driven project.
Hello! Thank you for visiting.
In summary, we want to enhance Flexbox column layout by breaking the content at specific points with what we call "Overflow Indicators".
Check this out:
https://i.sstatic.net/SDTyV.png
I've tried some examples of this concept, but I am more of a UX Designer than a developer, see here: (am I close?)
https://codepen.io/cclark413/pen/XvxbqV
var detectWrap = function(className) {
var wrappedItems = [];
var prevItem = {};
var currItem = {};
var items = document.getElementsByClassName(className);
for (var i = 0; i < items.length; i++) {
currItem = items[i].getBoundingClientRect();
if (prevItem && prevItem.top > currItem.top) {
wrappedItems.push(items[i]);
}
prevItem = currItem;
};
return wrappedItems;
}
window.onload = function(event){
var wrappedItems = detectWrap('block');
for (var k = 0; k < wrappedItems.length; k++) {
wrappedItems[k].classList.add("wrapped")
wrappedItems[k].innerText= "I wrapped!"
}
};* {
box-sizing:border-box;
font-family:sans-serif;
}
div.container {
padding:15px 0;
background-color:black;
display: flex;
flex-direction: column;
align-content: flex-start;
flex-wrap: wrap;
width:1024px;
height:400px;
margin:0 auto;
}
div.container > div {
margin:0 15px;
width:33.3%;
}
.header, .footer {
padding:5px;
background-color:#333;
color:white;
text-transform:uppercase;
font-size:10px;
}
.item {
background-color:#e1e1e1;
padding:15px;
}
div.spacer {
background-color:transparent !important;
height:15px;
}
div.wrapped {
color:white;
background-color: red;
}<div class="container">
<div class="header block">
<div class="row">
Row 1 Header
</div>
<div class="row">
Row 2 Header
</div>
</div>
<div class="item block">Item 1</div>
<div class="item block">Item 2</div>
<div class="item block">Item 3</div>
<div class="footer block">Test</div>
<div class="spacer block"></div>
<div class="header block">Header 2</div>
<div class="item block">Item 1</div>
<div class="item block">Item 2</div>
<div class="item block">Item 3</div>
<div class="item block">Item 4</div>
<div class="item block">Item 5</div>
<div class="footer block">Test</div>
</div>However, I have encountered a small issue with this solution: - The content is treated individually within the container instead of as "Coagulated Panels," limiting our ability to make changes to the panel itself. We need to find a way to encase the individual panel content after they have been split for overflow. Currently, I separated everything to utilize native flex capabilities.
While Flexbox gets us halfway there, it lacks the intelligence to fully utilize flex content. We aim to complicate things further by introducing Overflow Indicators (Jagged edges that mimic a torn panel starting a new column).
Here are some guidelines:
- This is a web interface utilizing Angular, HTML, CSS.
- The header/footer should always be connected. The header should accompany item one, and the footer should pair with the last item. Breaking panels in any other way is acceptable.
- We seek an elegant solution for the jagged edge, allowing customization with various background colors to match the panel's states (Disabled, Active, Cancelled, etc). We prefer a non-image based solution, possibly leveraging a versatile SVG.
- Although we want the content to overflow the page with pagination, we still desire the option of implementing horizontal scrolling for future panel views.
It might be an assumption that Flexbox is the ideal answer here rather than another solution. Excited to see innovative solutions!