Place the element at the bottom of the row above

I'm utilizing Angular to retrieve a list of items from the server and exhibit them on the page using:

<div class="col-sm-6 col-md-4" ng-repeat="activity in activities">
    <img ng-src="[[ act.icon ]]" height="100" alt="">
    <h3>[[ act.title ]]</h3>
    <a class="btn btn-king small color smooth-scroll" ng-click="joinActivity(activity)">Join</a>
    <p>[[ act.description ]]<br>
        Duration: [[ activity.num_times ]] time<br>
        Points: [[ activity.points ]]<br>
    </p>
</div>

As you can see, I intend for each row to display 2 activities on small screens, and 3 activities on medium and larger screens. However, I am encountering an issue where not all rows are displaying the desired number of activities. This problem arises due to some activities having more text content than others, causing their heights to vary. As a result, the next activity is placed in the highest available position on the row below, often disrupting the layout.

It seems like there might be a simple CSS solution to this issue, but I have been unable to find it. The ultimate goal is to achieve the layout shown in the image below. Any assistance in resolving this matter would be greatly appreciated.

htmlcssangularjs

Answer №1

To achieve the desired layout, it is necessary to clear the rows and then reset and reapply these clears at various breakpoints.

Check out this article on clearing Bootstrap 3 columns for more details

Answer №2

If you find yourself in a situation where you need to clear a row after every 2nd item on screens with a size of `md` and after every 3rd item on screens with a size of `sm`, you can follow this example:

<div ng-repeat="activity in activities">

    <!-- your item -->
    <div class="col-sm-6 col-md-4">
        <img ng-src="[[ act.icon ]]" height="100" alt="">
        <h3>[[ act.title ]]</h3>
        <a class="btn btn-king small color smooth-scroll" ng-click="joinActivity(activity)">Join</a>
        <p>[[ act.description ]]<br>
            Duration: [[ activity.num_times ]] time<br>
            Points: [[ activity.points ]]<br>
        </p>
    </div>

    <!-- clear row after every 3rd item on MD screens -->
    <div class="clearfix visible-md" ng-if="($index+1) % 3 === 0"></div>

    <!-- clear row after every 2nd item on SM screens -->
    <div class="clearfix visible-sm" ng-if="($index+1) % 2 === 0"></div>
</div>

For a live demonstration, check out this Plunker link

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

Chrome is where all the action happens, while Firefox prefers to keep things on the left

After a long break, I returned to designing my website and re-learning CSS. My approach involved creating a WordPress-integrated site with minimal HTML/PHP work, focusing more on utilizing the available CSS classes and IDs provided by a template theme (Bla ...

phphtmlcsswordpresscenter

How can you retrieve attributes from a specific element within a dropdown menu?

I came across this intriguing HTML code snippet: <select id="selectSomething"> <option id="4" data-name="tomato" data-email="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbba0a2aebba08fbbe1aca0a2">[email ...

javascriptjqueryhtmlselect

Modify the button input value within a PHP script

I am currently working on a piece of code that involves following different users and inserting values from a MySQL table. <td align="center"> <input type="button" name="<?php echo $id; ?>" id="<?php ech ...

javascriptphphtmlmysql

Guide to creating dynamic borders around your PHPexcel output

Looking for assistance on adding borders around output arrays in an Excel report using PHPexcel. I reviewed the documentation, but the examples are static, requiring a predefined number to set. My goal is to have all arrays transferred to Excel with bord ...

javascriptphpjqueryhtmlphpexcel

Tips for arranging bar series in the NVD3 multibar angularJS directive

I am trying to generate a multi-bar chart using the nvd3 AngularJS directive by cmaurer, but I am facing an issue with stacking some series. Here is the data I am working with: $scope.exampleData = [ { "key": "Initial ...

angularjsd3.jsangularjs-directivenvd3.js

Displaying the information from a nested array of objects in an HTML table through iteration

In the code snippet below, there is an input with a nested array of objects. The main array of objects is called summary and within it, there's a nested array called run_type. let input = { "summary": [ { " ...

javascripthtmljquerycssreactjs

Adjusting the initial index for looping in AngularJS

Currently, I am working on a Web application utilizing AngularJS. One issue I am facing is implementing a for loop in the html using AngularJS conventions. Allow me to explain my situation below. In AngularJS, we typically iterate through items using ng-r ...

angularjsfor-loopangularjs-ng-repeat

The class name feature on the Drawer component is malfunctioning

React and material-ui are my tools of choice, but I've hit a roadblock. I'm attempting to define some custom CSS behavior for the drawer component, using the className property as recommended. However, despite following the instructions, it' ...

cssreactjsmaterial-ui

Is there a way to check if a file name input is valid using regular expressions?

I'm having trouble getting my code below to work properly. I'm not sure if the problem lies in the match function syntax or the regex itself. Any assistance would be greatly appreciated. $scope.fileSelected = function (file) { var valid = "/ ...

javascriptangularjsregex

Angular's modalservice fails to recognize the enter key input

I am currently implementing a Modal dialog using ui.bootstrap & angular modal service <div id="modalDialog" class="modal-dialog"> <div class="modal-header"> <h2 style="text-align: center">{{modalOptions.headerText}}</h2> ...

angularjsui.bootstrap

What's the most effective method for implementing a stylesheet through Javascript in a style switcher?

I've been tackling the challenge of creating a style switcher for my website. Through utilizing .append() and if and else statements, I managed to make it work successfully. Take a look at the code below: HTML <select name="active_style" id="lol" ...

javascripthtmlcssperformance

Adjusting diagram size based on screen width using Bootstrap and jQuery

I recently created a diagram that adjusts its size according to the screen width. However, when I implemented this code on my page, I encountered an issue where the final circle or glyph would drop to the next line instead of staying on the same line as in ...

javascriptjqueryhtmlcsstwitter-bootstrap

Integrating individual script into HTML

Imagine you have a file named public/index.html. Additionally, there is another html file called otherScript, which contains only <script> tags with a script inside. How can you include these scripts into your public/index.html file? You intend to ...

javascripthtmlwebpack

Adding a Bearer Token to a GET request using location.href: A step-by-step guide

At the moment, I have all my ajax requests sending an Authentication token. However, I have created a service for exporting to excel and since ajax doesn't support that, I am using location.href for the get request. Is there a way to include the token ...

javascriptangularjsajaxasp.net-mvc

browsing through a timeline created using HTML and CSS

I am currently working on a web project that involves creating a timeline with rows of information, similar to a Gantt chart. Here are the key features I need: The ability for users to scroll horizontally through time. Vertical scrolling capability to na ...

javascriptjqueryhtmlcssscroll

AngularJS login form with JSON data

I am currently learning Angular and focusing on the login form implementation. The specific model I am working with can be found in this PLNKR. There are two challenges that I am struggling to resolve. Issue 1: I'm trying to figure out how to tur ...

javascriptangularjsjsonforms-authentication

Angular is unable to iterate through a collection of ElementRef instances

My list of ElementRef contains all my inputs, but adding listeners to them seems to indicate that textInputs is empty even though it's not. @ViewChildren('text_input') textInputs!: QueryList<ElementRef>; ngAfterViewInit(): void { ...

htmlangulartypescriptelementref

Java update query experiencing issues

This servlet is designed to add a new user entry into a database table. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String firstname = request.getParameter("firstname"); Str ...

javajqueryhtmlcssjsp

Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

How can I detect a click on the specified element by using the "Click Element" variable in Google Tag Manager? <a href="https://amazon.in/product-id" target="_blank" class="amazon-btn"> <div> <span&g ...

htmlcsscss-selectorsgoogle-tag-manager

Implement a dialog on top of a current web page, achieve php-ajax query result, and enhance with

My website features 'dynamic' content, where 'static' nav-buttons replace specific div contents upon clicking. While I am able to retrieve my php/ajax results in a dialog box, I am struggling with placing this dialog above my current p ...

javascriptphphtmlajaxjquery-mobile