In the midst of working on my application, I managed to achieve a simple layout. However, there is one peculiar requirement that has been eluding me for the past 2 days and now I find myself in need of assistance.
Here is the current HTML code I am working with: JSFiddle Link
HTML:
<body>
<div class="row flex-container">
<div class="col-sm-3" style="margin:5px">
<label>Label 1</label>
</div>
<div class="col-sm-3" style="margin:5px">
<label>Label 2</label>
</div>
<div class="col-sm-3" style="margin:5px">
<label>Label 3</label>
</div>
<div class="col-sm-3" style="margin:5px">
<label>Label 4</label>
</div>
<hr />
<div class="col-sm-3" style="margin:5px">
<label>Label 5</label>
</div>
<div class="col-sm-3" style="margin:5px">
<label>Label 6</label>
</div>
<div class="col-sm-3" style="margin:5px">
<label>Label 7</label>
</div>
<div class="col-sm-3" style="margin:5px">
<label>Label 8</label>
</div>
</div>
</body>
CSS:
.flex-item {
margin: 4px;
flex: 0 1 calc(25% - 8px);
}
.flex-container {
width: inherit;
display: flex;
flex-flow: row wrap;
position: relative;
}
.flex-container hr {
width: 100%;
padding: 0%;
margin: 0%;
margin-top: 20px;
margin-bottom: 20px;
height: 2px;
border: none;
background-color: #000;
}
The desired layout can be seen in the provided JSFiddle link. It consists of two rows separated by an HR tag. The challenge at hand is ensuring that when an element is removed from Row 1, the elements from Row 2 shift up to fill the gap in Row 1.
Each row should contain a maximum of 4 elements. Therefore, if an element is removed from Row 1, only one element should move up to fill the space in Row 1, and so forth. Additionally, if there are no elements in Row 2, the HR should not be displayed.
I have considered using "ngIf" based on the element count to control the visibility of the HR, but this does not address the primary requirement of shifting elements between rows. Any insights or guidance on how I can achieve this functionality would be greatly appreciated as I find myself stuck at this juncture.