AngularJS ng-repeat items do not properly align when utilizing Bootstrap col-md-2 styles

Question

AngularJS ng-repeat items do not properly align when utilizing Bootstrap col-md-2 styles

Utilizing AngularJS ng-repeat for displaying a list of products and incorporating bootstrap col-md-2 to showcase 6 products in each row, I have included a condensed version of my code below:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap- theme.min.css">
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>
<style type="text/css">
    p{
    padding: 50px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    background: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
       <div class="col-md-2" ng-repeat="item in items">
           <img src="{{itme.imgURL}}" />
           <p>{{item.title}}</p>
           <div>
                <a href="{{item.productURL}}" />
           </div>
       </div> 
    </div>
</div>
</body>

Some product titles are lengthy, causing them to span multiple lines and disrupt the alignment of elements. To observe this misalignment, please test the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap- theme.min.css">
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">        </script>
<style type="text/css>
    p{
    padding: 50px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    background: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-2"><p>Box 1 test</p></div>
        <div class="col-md-2"><p>Box 2</p></div>
        <div class="col-md-2"><p>Box 3</p></div>
        <div class="col-md-2"><p>Box 4</p></div>
        <div class="col-md-2"><p>Box 5</p></div>
        <div class="col-md-2"><p>Box 6</p></div>
        <div class="col-md-2"><p>Box 7</p></div>
        <div class="col-md-2"><p>Box 8</p></div>
        <div class="col-md-2"><p>Box 9</p></div>
        <div class="col-md-2"><p>Box 10</p></div>
        <div class="col-md-2"><p>Box 11</p></div>
        <div class="col-md-2"><p>Box 12</p></div>
    </div>
</div>
</body>
</html>

In this scenario, Box 7 appears below Box 2 instead of being aligned under Box 1.

Although adding a clearfix div before Box 7 or placing elements 7-12 in a new bootstrap row can resolve the issue, due to using ng-repeat, individual control over each element is limited.

If anyone has suggestions on achieving proper alignment of all elements, it would be greatly appreciated!

javascript html css angularjs twitter-bootstrap

Answer 1

Answer №1

If you want to implement a custom directive that will be executed for each item in a repeat loop, with the setTimeout() function used when reaching the last item to allow time for rendering of the HTML content and calling a height retrieval function, here is an example:

angular.module('box').directive('myRepeatDirective', function () {
    return function (scope, element, attrs) {
        if (scope.$last) {
            setTimeout(function () {
                scope.$eval('resizeBoxes()');
            }); 
        }
    };
})

The resizeBoxes method uses JQuery to determine the maximum height of elements and then sets all paragraphs to have the same height.

.controller("boxController", ['$scope', function ($scope) {
    $scope.boxes = boxes;

    $scope.resizeBoxes = function () {
        var maxHeight = -1;

        $('.col-md-2 p').each(function () {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });
        $('.col-md-2 p').each(function () {
            $(this).height(maxHeight);
        });
    }
}])

HTML structure:

<div class="container" ng-controller="boxController">
    <div class="row">
        <div class="col-md-2" ng-repeat="b in boxes" my-repeat-directive>
            <p>{{b.label}}</p>
        </div>
    </div>
</div>

To view the code running, visit Plunker

Answer 2

If you want to implement a custom directive that will be executed for each item in a repeat loop, with the setTimeout() function used when reaching the last item to allow time for rendering of the HTML content and calling a height retrieval function, here is an example:

angular.module('box').directive('myRepeatDirective', function () {
    return function (scope, element, attrs) {
        if (scope.$last) {
            setTimeout(function () {
                scope.$eval('resizeBoxes()');
            }); 
        }
    };
})

The resizeBoxes method uses JQuery to determine the maximum height of elements and then sets all paragraphs to have the same height.

.controller("boxController", ['$scope', function ($scope) {
    $scope.boxes = boxes;

    $scope.resizeBoxes = function () {
        var maxHeight = -1;

        $('.col-md-2 p').each(function () {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });
        $('.col-md-2 p').each(function () {
            $(this).height(maxHeight);
        });
    }
}])

HTML structure:

<div class="container" ng-controller="boxController">
    <div class="row">
        <div class="col-md-2" ng-repeat="b in boxes" my-repeat-directive>
            <p>{{b.label}}</p>
        </div>
    </div>
</div>

To view the code running, visit Plunker

Answer 3

Answer №2

Check out this helpful fiddle. Remember to include the necessary code in your project for it to work effectively.

This JavaScript solution was derived from a personal project experience where I encountered a recurring issue. I've considered turning it into a module because many developers face similar challenges.

The sizesiblings function takes a jQuery selector and ensures that elements maintain uniform dimensions based on the tallest element's height.

Here's an example of how you might use it...

I initially tried to explain it here, but it became too complex. Instead, I made updates to the fiddle :)

By calling

sizesiblings('.repeated-items>.col-md-2');

, all the divs should align properly.

Answer 4

Check out this helpful fiddle. Remember to include the necessary code in your project for it to work effectively.

This JavaScript solution was derived from a personal project experience where I encountered a recurring issue. I've considered turning it into a module because many developers face similar challenges.

The sizesiblings function takes a jQuery selector and ensures that elements maintain uniform dimensions based on the tallest element's height.

Here's an example of how you might use it...

I initially tried to explain it here, but it became too complex. Instead, I made updates to the fiddle :)

By calling

sizesiblings('.repeated-items>.col-md-2');

, all the divs should align properly.

AngularJS ng-repeat items do not properly align when utilizing Bootstrap col-md-2 styles

Answer №1

Answer №2

Here's an example of how you might use it...

Similar questions

Is there a way to ensure that all elements on a page display properly across all screen resolutions without being cut off?

How can I utilize customToJSON in Sails 1.0 within an Action2 function?

How can we prevent floating li elements from overlapping the parent div element?

Limiting the Display of Pages with PHP Pagination

AngularJS Unveiled: The Puzzle of ng-if's Digest Loop

How can I assign a value to an invalid input from a controller in AngularJS?

Recurly.js version 3 with additional features

How can I center a text element vertically within its parent div element?

Receiving error message "51 F02 FacebookConnectPlugin sClass not found" while attempting Facebook login with Ionic and Cordova

Manipulate inherited CSS styles from an external source

What is the best way to implement a dynamic sidebar component using React and Material UI?

Using QuerySelector with Angular Directive will throw an error as it is not a recognized

Replace particular letters within the text with designated spans

Enhancing the tooltip inner content in Bootstrap with a description:

How to apply styling to a specific portion of text within a list element using Vue.js

Remove the content located beside an input element

Firefox and Internet Explorer have a tendency to break lines at very specific pixel measurements

Tips for effectively utilizing innerHTML in this particular scenario

Using several ng-repeats in a single element

FadeOut Television static on Canvas after a period of inactivity