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.

https://i.sstatic.net/LuFG4.png

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

Combining an image seamlessly with the background color in HTML

I'm having an issue with my HTML page where the background color is red. I've posted two images - one blends in perfectly with the background while the other creates white patches. How can I fix this problem? Check out the Fiddle Link for refere ...

htmlcssimagepngjpeg

Can one open a unique custom pop-up before the window is about to close?

Seeking a way to create a pop-up confirmation dialog for users when they try to log out or stay on the page while logged in. I attempted using the code below, but haven't been able to find the correct solution: window.onbeforeunload = function (e) { ...

javascriptjqueryhtml

Position the Crossmark to align with text using CSS styling

How can I properly align a crossmark and a checkmark with the text behind them? The checkmark looks aligned well, but the crossmark appears to be slightly off to the top-right. I'm hesitant to adjust margins and paddings as it may cause issues when th ...

htmlcssbootstrap-5

Error code received from OpenStack Identity API GET response

I am an intern student and I have a query. Currently, I am working on bug fixing for an Openstack cloud, JavaScript, and Node.js web application. My task involves resolving toastr.error messages and translating them into different languages. How do I ret ...

javascripthtmljsonnode.jsopenstack

New data row successfully added to HTML table, revealing an object display

When I click a button, a dialog box opens up. I can fill out the form inside the dialog box and submit it to insert a row into a table. After submitting the form, the newly inserted row displays as [object Object] immediately after submission: It seems t ...

javascriptphphtmljquery

Tips for sending an email without using MAILTO in JavaScript or jQuery

Today is a great day for many, but unfortunately not for me. I've been struggling with this issue for over two weeks now and can't seem to find a solution anywhere on the internet. Stack Overflow always comes to my rescue when things get really t ...

javascriptjqueryhtmlemail

Angular: The Process of Completely Updating a Model Object

Within my application, there is an object named eventData which acts as a singleton and is injected into multiple controllers through a resolve function. This eventData contains various sets of data such as drop down list values along with the main model. ...

javascriptangularjs

Remove the footer from the main section

I'm facing an issue with the web page layout of my website. Here is a snippet of the structure: <body> <div class="container"> <div class="sidebar"> </div> <div class="content"> </div> </div> < ...

htmlcss

Having trouble retrieving JSON data from the open weather API

I'm working on a small website to display the weather of a specific city using an API. However, I am facing an issue where I can't seem to display the temperature from the response. Below are snippets of my JavaScript and HTML files: var ap ...

javascripthtmljsonapi

What is the best way to place a JavaScript or jQuery variable within an HTML tag?

Suppose we have a variable called var sticky_element = ".menu"; and then there's this line of code: jQuery(sticky_element).wrapInner('<div class="menu-inner"></div>'); How do we replace the menu in class="menu-inner" with the ...

javascriptjqueryhtmltagsvar

When utilizing jQuery in HTML, the Marquee will bounce back upon reaching the end

My issue is that when I use a regular marquee, the text simply goes to the end and does not bounce back to the start as soon as it reaches the end of the div. Instead of using a normal marquee, I am looking to achieve this desired effect by utilizing jQue ...

javascriptphpjqueryhtmlajax

Sticky footer with overlapping DIV

I am working on a container with three nested divs: header, content, and footer <div class="note"> <div class="header">Title</div> <div class="content" contenteditable="true">Some content</div> <div class="fo ...

htmlcss

What is the best way to display a child div without impacting the position of other elements within the same parent container?

As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting ...

javascripthtmlcss

How can I resize or break the overflowing Bootstrap pagination within the parent div based on the resolution?

When utilizing boostrap4 theming for my pagination, a problem arises when loading the page on smaller resolutions than my monitor. The paginate section exceeds the parent div, resulting in an unsightly display. Below is a snippet of my code: <div clas ...

htmlcssbootstrap-4

Expanding image in card to fit device width using Ionic

Currently utilizing the ionic framework and attempting to expand the image within the card to fit the device width. Referencing the example provided here, here is my current code progress. <div class="list card"> <div class="item item-avatar" ...

cssionic-framework

"Struggling with setting the default checked state for single and multiple checkboxes? The ng-init method with checkboxModel.value=true seems to be ineffective – any suggestions

<input type="checkbox" ng-model="isChecked.value" ng-true-value="'yes'" ng-false-value="'no'" ng-click='handleCheckboxChange(isChecked.value, idx);' ng-init="isChecked.value=true" /> ...

javascripthtmljqueryangularjsangular

An HTML table featuring rows and columns that can be adjusted in size separately from the content within each cell

Looking to create an HTML table where the columns and rows can be sized independently of the cell content? If a row or column isn't large enough to display all the content, it should simply overflow behind the cell. A solution was found that worked in ...

htmlcssfirefox

If the item has an active class, apply a new class to the parent element and all of its

If I have code like the example below and want to add the show class to the parent and ancestors. // The last `nav-item` has the `active` class <div class="nested-group nested-item show"> <div class="nested-item show"> <div class="n ...

javascriptjqueryhtmlcss

Learning to implement the ng2-chart.js directive within Angular 2

I recently installed ng2-charts through npm First, I ran npm install ng2-charts --save and npm install chart.js --save After that, I included the following code in my index.html file: <script src="node_modules/chart.js/src/chart.js"></script> ...

angularjsangularangularjs-directiveangular2-templateng2-charts

The NextRouter failed to mount

Currently, I am in the process of incorporating a search functionality into my property rental application. I have successfully added the Nextjs Router to handle the routing. However, when attempting to access localhost:3000/search, an error is encountered ...

htmlreactjsnext.jsfrontendurl-routing