Is there a way to maintain the original order of DIVs when they expand on their own?

Question

Is there a way to maintain the original order of DIVs when they expand on their own?

I have a grid of items that expand to show a table below when clicked. While this functionality works, it causes the DIVs to reorder as shown in my example below.

I want them to maintain their positions within their respective "columns".

Here is an illustration for clarity:

Below is the HTML code I'm working with:

<div 
class="item-component" 
ng-controller="CollapseCtrl"
ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
>

<div class="component-wrapper" ng-click="isCollapsed = !isCollapsed">
    Item - click to expand
</div>

<div class="codes-wrapper" collapse="isCollapsed">    
    <table class="table table-striped table-condensed">
        Expanded content here
    </table>    
</div>
</div>

Additionally, here is the .item-component class:

.item-component {
  width: 33.33333333333333%;
  float: left;
  padding-left: 15px;
}

How can I achieve the "expected result" from my illustration?

javascript jquery html css angularjs

Answer 1

Answer №1

Instead of using float:left, try using display:inline-block for your .item-component

See Live Demo

.item-component {
  width: 33.33333333333333%;
  display: inline-block;
  padding-left: 15px;
}

Alternatively, you can refer to BootStrap and maintain the float:left by using the :before element. Remember to wrap each row:

.col{
    float:left;
    width: 32.33%;
    min-height: 50px;
    background: #ccc;
    padding: 20px;
    box-sizing: border-box;
}
.row{
    display:block;
}
/* This will solve the issue */
.row:before{
    content: " ";
    display: table;
    box-sizing: border-box;
    clear: both;
}

Live Example Here

Update: If you wish to eliminate the gap, consider a different HTML markup where each column is printed with its respective rows.

This is how the HTML markup should look like:

<div class="col">
    <div class="row" id="demo">1</div>
    <div class="row">4</div>
    <div class="row">7</div>
</div>

<div class="col">
    <div class="row">2</div>
    <div class="row">5</div>
    <div class="row">8</div>
</div>

<div class="col">
    <div class="row">3</div>
    <div class="row">6</div>
    <div class="row">9</div>
</div>

And here's the necessary CSS:

.col{
    float:left;
    width: 32.33%;
}
.row{
   display:block;
   padding: 20px;
   box-sizing: border-box;
   background: #ccc;
   min-height: 50px;
}
#demo{
    height: 150px;   
    background: red;
}

Check Out the Live Demo

Answer 2

Instead of using float:left, try using display:inline-block for your .item-component

See Live Demo

.item-component {
  width: 33.33333333333333%;
  display: inline-block;
  padding-left: 15px;
}

Alternatively, you can refer to BootStrap and maintain the float:left by using the :before element. Remember to wrap each row:

.col{
    float:left;
    width: 32.33%;
    min-height: 50px;
    background: #ccc;
    padding: 20px;
    box-sizing: border-box;
}
.row{
    display:block;
}
/* This will solve the issue */
.row:before{
    content: " ";
    display: table;
    box-sizing: border-box;
    clear: both;
}

Live Example Here

Update: If you wish to eliminate the gap, consider a different HTML markup where each column is printed with its respective rows.

This is how the HTML markup should look like:

<div class="col">
    <div class="row" id="demo">1</div>
    <div class="row">4</div>
    <div class="row">7</div>
</div>

<div class="col">
    <div class="row">2</div>
    <div class="row">5</div>
    <div class="row">8</div>
</div>

<div class="col">
    <div class="row">3</div>
    <div class="row">6</div>
    <div class="row">9</div>
</div>

And here's the necessary CSS:

.col{
    float:left;
    width: 32.33%;
}
.row{
   display:block;
   padding: 20px;
   box-sizing: border-box;
   background: #ccc;
   min-height: 50px;
}
#demo{
    height: 150px;   
    background: red;
}

Check Out the Live Demo

Answer 3

Answer №2

You have the opportunity to accomplish it using the following approach.

HTML:

<div class="container">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <br class="clear" />
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <br class="clear" />
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
<div>

CSS:

.col {
    float: left;
    width: 100px;
    min-height: 100px;
    background: #ccc;
    padding: 20px;
    margin: 10px;
    cursor: pointer;
}

.col:hover {
    background: yellow;
}

JS:

$('.col').click(function() {
    if ($(this).is('.clicked')) {
        $(this).removeClass('clicked');
    } else {
        $(this).addClass('clicked')
    }
});

Live demonstration: http://jsfiddle.net/S7r3D/1/

ETA: The issue with this methodology is that it displaces the entire row downwards. Finding a more elegant solution might be challenging... You could attempt to overflow the other divisions, but suitability depends on your requirements. Would such an approach be satisfactory?

ETA2: Surprisingly, I believe I have perfected it! Observe here: http://jsfiddle.net/S7r3D/3/ The pivotal modification involved reordering the divisions and placing them in columns instead.

HTML:

<div class="container">
    <div class="fleft">
        <div class="col">1</div>
        <div class="col">4</div>
        <div class="col">7</div>
    </div>
    <div class="fleft">
        <div class="col">2</div>
        <div class="col">5</div>
        <div class="col">8</div>
    </div>
    <div class="fleft">
        <div class="col">3</div>
        <div class="col">6</div>
        <div class="col">9</div>
    </div>
<div>

CSS:

.col {
    clear: both;
    width: 100px;
    min-height: 100px;
    background: #ccc;
    padding: 20px;
    margin: 10px;
    cursor: pointer;
}

.col:hover {
    background: yellow;
}

.col.clicked {
    height: 300px;
    background-color: red;
}

.fleft
{    
    float: left;
}

JS: /* identical to above */

Answer 4

You have the opportunity to accomplish it using the following approach.

HTML:

<div class="container">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <br class="clear" />
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <br class="clear" />
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
<div>

CSS:

.col {
    float: left;
    width: 100px;
    min-height: 100px;
    background: #ccc;
    padding: 20px;
    margin: 10px;
    cursor: pointer;
}

.col:hover {
    background: yellow;
}

JS:

$('.col').click(function() {
    if ($(this).is('.clicked')) {
        $(this).removeClass('clicked');
    } else {
        $(this).addClass('clicked')
    }
});

Live demonstration: http://jsfiddle.net/S7r3D/1/

ETA: The issue with this methodology is that it displaces the entire row downwards. Finding a more elegant solution might be challenging... You could attempt to overflow the other divisions, but suitability depends on your requirements. Would such an approach be satisfactory?

ETA2: Surprisingly, I believe I have perfected it! Observe here: http://jsfiddle.net/S7r3D/3/ The pivotal modification involved reordering the divisions and placing them in columns instead.

HTML:

<div class="container">
    <div class="fleft">
        <div class="col">1</div>
        <div class="col">4</div>
        <div class="col">7</div>
    </div>
    <div class="fleft">
        <div class="col">2</div>
        <div class="col">5</div>
        <div class="col">8</div>
    </div>
    <div class="fleft">
        <div class="col">3</div>
        <div class="col">6</div>
        <div class="col">9</div>
    </div>
<div>

CSS:

.col {
    clear: both;
    width: 100px;
    min-height: 100px;
    background: #ccc;
    padding: 20px;
    margin: 10px;
    cursor: pointer;
}

.col:hover {
    background: yellow;
}

.col.clicked {
    height: 300px;
    background-color: red;
}

.fleft
{    
    float: left;
}

JS: /* identical to above */

Answer 5

Answer №3

Divide the content into three separate container divs, assigning {1, 4, 7} to div1, {2, 5, 8} to div2, and {3, 6, 9} to div3 for easier management of their placement.

Failing to do so may result in challenges when trying to control their positioning effectively.

Answer 6

Divide the content into three separate container divs, assigning {1, 4, 7} to div1, {2, 5, 8} to div2, and {3, 6, 9} to div3 for easier management of their placement.

Failing to do so may result in challenges when trying to control their positioning effectively.

Is there a way to maintain the original order of DIVs when they expand on their own?

Answer №1

Answer №2

Answer №3

Similar questions

When I send data using axios, I receive the response in the config object instead of the data

Event triggered by clicking on jsTree nodes

What sets Angular and Meteor apart from each other?

Is it necessary to have aria-checked attribute on a physical checkbox?

Why does the "error loading page" message appear on the server when there is a PHP function inside jQuery Mobile?

The posenet TensorFlow model results in Node.js do not contain any position detail for coordinates "x" and "y"

Refreshing the entire page upon modifying a single state

What is the best way to display an overlay internal link on top of the current one after it has been clicked

Is it possible to use the jQuery .ajax() method to parse a javascript object that contains XML data?

Is there a way to specifically target the parent input div using event delegation with jQuery?

How about: "Are you utilizing the recoil selector for sorting through component

Filtering JSON data with JavaScript

Perpetual spinning of image grid

Selenium is transitioning to precise locations

The AngularJS object becomes null when it is sent to a RESTful web service

Utilizing AJAX and JavaScript to parse JSON data that includes an array

behavior of the back button within an AngularJS program

Allow the mobile web app to prompt the user's default mobile browser to open a link rather than displaying it within the app itself

Utilize PHP to Extract ID3 Tags from MP3 Files and Embed Them into HTML

Updating the property value of an element in Angular 9