Is it possible to create a dynamic <hr /> using Flexbox?

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.

javascripthtmlcssangularflexbox

Answer №1

If you're facing this issue, try using flex Order to solve it.

Here are the steps you can follow:

  • Assign a common class to all items except 'HR' elements
  • Create a CSS code for all items using "nth-of-type(2)", you can learn more about it here
  • The parent element must have display flex and flex wrap properties set
  • Add CSS to make HR elements 100% width

It's recommended to inline CSS for maintaining the order of CSS.

#Check out the code snippet or visit JSFiddle

.flex-item {
  margin: 4px;
  flex: 0 1 calc(25% - 8px); 
}
.flex-container {
  width: inherit;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.item:nth-of-type(1) { order: 1 ; }
.item:nth-of-type(2) { order: 2; }
.item:nth-of-type(3) { order: 3; }
.item:nth-of-type(4) { order: 4; }
.item:nth-of-type(5) { order: 5; }
.item:nth-of-type(6) { order: 6; }
.item:nth-of-type(7) { order: 7; }
.item:nth-of-type(8) { order: 8; }

.flex-container hr {
    order: 5;
    width: 100%;
    background-color: #000;
}
<div class="row flex-container">
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 2</label>
    </div>
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 3</label>
    </div>
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 4</label>
    </div>
    <hr />
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 5</label>
    </div>
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 6</label>
    </div>
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 7</label>
    </div>
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 8</label>
    </div>
  </div>

==== Appreciate your help ====

Answer №2

I managed to achieve this using only CSS. I took your snippet and made some adjustments to the CSS code. You were almost there!

.flex-item {
  margin: 4px;
  flex: 0 1 calc(25% - 8px); 
}
    .flex-container {
  width: inherit;
  display: flex;
  flex-flow: row wrap;
  position: relative;
  justify-content: flex-start;
}
    .flex-container hr {
     top: 0;
     bottom: 0;
     width: 100%;
     margin: auto;
     height: 2px;
     border: none;
     background-color: #000;
     position: absolute;
}

.flex-container div {
  flex: 1 0 calc(25% - 10px);
  max-width: calc(25% - 10px);
}

Check out the updated version here.

Answer №3

My approach to solving this problem is as follows:

let labels = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'];

let firstBatch = labels.slice(0, 4);
let secondBatch = labels.slice(4);

document.body.innerHTML = `${firstBatch.join(',')} <hr /> ${secondBatch.join(',')}`;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the location by determining the distance from established points

Before I get redirected to this particular question, let me clarify that while I've come across it, I am unable to comprehend its content (I wish I could). What I'm really seeking is a straightforward method (bearing in mind my limited math skill ...

javascript

Enabling draggable behavior for div elements on Mozilla Firefox

I've attempted the code mentioned in this forum but unfortunately, it's not working for me. I am currently using Firefox 15 and it seems to work fine in Chrome. Below is my code : <!DOCTYPE html> <head> <title>A Simple Dragg ...

javascripthtml

The NPM Install process seems to be skipping certain files that were successfully installed in the past

When I first installed NPM Install in a folder, it created multiple folders and files: node_modules public src .DS_Store package.json package-lock.json webpack.config.js After that, npm start functioned perfectly. Now, as I embark on a new project for th ...

javascripthtmlnpm

Refresh the webpage following removal of an item on IONIC4

Hey there, I need some help from the experts here. I'm currently working on developing an e-commerce mobile app using Ionic 4. I'm facing a challenge with updating the item-total summary when an item is removed from the cart page. Below is my ca ...

angularionic4reload

Prevent event bubbling on a link generated by an Angular directive that includes transclusion

I am currently developing a directive that adds a link to a DIV element through transclusion. However, I am facing an issue where I want to execute specific functionality when the link is clicked without being redirected to the dummy href (in this case goo ...

javascriptangularjs

Attempting to send arguments to a jQuery ajax request

After successfully implementing my original ajax call, I decided to create a reusable function for it. This way, I can easily modify the data and URL fields of the ajax call without having to retype everything each time. However, I encountered an issue whe ...

javascriptjqueryajaxfunctionparameters

The transparent DIV/waiting message may not be displayed in IE10

Here is a DIV container that serves as a transparent background with a loading message. This is the HTML code for the DIV container: <div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: ...

jqueryhtmlcssajaxinternet-explorer-10

Are you searching for a stylish tabbed navigation menu design?

I am searching for a tabbed navigation menu specifically designed to showcase images as the tab items. Here is an example of what I have in mind: <div class="menu"> <a href="#"> <img src="images/Chrysanth ...

jquery-uicss

Ways to retrieve slider value when button is clicked?

I am currently working on a range-slider that has two ranges and I need to retrieve the slider value in my javascript code. Here is my approach so far: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.cs ...

javascriptjquery

The split function in JavaScript is exhibiting some unusual behavior

There is something wrong with my code challenge1 = () => { var data = fs.readFileSync('santa21.txt', 'utf8'); data = data.toString(); dataSplit = data.split(' ') console.log(dataSplit); }; challenge1(); The result of the ...

javascriptarraysfunctionsplit

What is the best way to make a trail follow my shapes on canvas?

In my current project, I have implemented a feature where shapes are generated by spinning the mouse wheel. One specific shape in focus is the triangle, but other shapes follow the same generation process. The goal is to create a trail that slowly fades ...

javascripthtmlcanvas

Having issues with parameterized URL integration between Django2 and Angular2

I am encountering an issue with integrating a URL containing parameters in Angular and Django. When making a call to the url, Django expects a slash at the end while Angular appends a question mark before the parameters. How can this be resolved? Below is ...

djangoangularurlintegration

Negatives of utilizing two different UI libraries within a single react project?

I have been contemplating a decision that may be considered unconventional from a technical standpoint. Despite my search efforts, I have not come across any explanation regarding the potential drawbacks of this decision. Imagine creating a React website ...

javascriptreactjsmaterial-uiantd

Using jQuery to extract a href URL from a div tag with jQuery

Is it possible to extract the href urls from anchor tags within a div tag? <div id="testing"> <a onclick="http://google.com">google</a> <a href="http://facebook.com">facebook</a> <a onclick="http://gmail.com">gmail< ...

javascriptjquery

Issue found in Bootstrap-Multiselect plugin: The dropdown menu appears beneath the outer container when overflow-y is applied

My experience with using Bootstrap-Multiselect and encountering an issue where the dropdown disappears when the outer container has overflow-y: scroll and a max-height has prompted me to seek solutions. I am looking for a way to ensure that the dropdown is ...

jqueryhtmlcsstwitter-bootstrapbootstrap-multiselect

Determine the size of v-flex in Vue / Vuetify

Vuetify provides the v-resize directive, which is demonstrated in an example using window size. I am interested in utilizing this directive to monitor the size of a specific component (e.g. v-flex). In the provided codesandbox example, the objective is t ...

htmlvue.jsvuetify.js

Why won't JSZip accept a base64 string for loading a zip file?

As I work on implementing a feature where a small JSON object is written to the URL as a user interacts with items on a page, I also want to make sure the URL can be read later so users can resume where they left off. I successfully managed to create the ...

javascriptjszip

Including hyperlink tags within a CSS file

Can you create internal links within a CSS file, like inserting a table of contents at the top where you can click on an item and immediately jump to that section in the CSS file similar to an anchor tag? This feature would be extremely handy for long CSS ...

htmlcss

Steps for encoding a CSV export with HTML:

When I retrieve data from a string that is HTML encoded as Quattrode® I end up with Quattrode® after viewing it in Excel 2007. Here is the routine: Response.Clear(); Response.Buffer = true; Response.ContentType = "text/ ...

c#htmlasp.netcsv

Event listener for scrolling in Angular Dart component

I am looking to implement a functionality where a "back to top" button appears once the user has scrolled the page by 500px. I have been trying to capture the scroll event in the main Div of my AppComponent. <div class="container" scrollable&g ...

angulardart