Ensure all division elements have the same height by utilizing a directive

My webpage currently displays a grid that is not properly arranged. However, when I executed the code below in the console, the grid was formatted correctly:

var maxHeight = Math.max.apply(null, $("#activityfeeddetails").find(".course_thumb_outer").map(function (){
                    return $(this).height();
                }).get());

$("#activityfeeddetails").find(".course_thumb_outer").css("height",maxHeight);

After executing the code, the screen now looks like this:

Question: How can I integrate this code into an Angular directive so that it runs once all the data and templates are loaded?

Here is the current directive that I have, but it's not working properly:

dwmProfileDirectives.directive('profileActivityFeedTab', ['Activityfeed', function(Activityfeed) {
    return {
        restrict: 'E',
        scope: {
            current:'=current'
        },
        templateUrl:'tabs/dwm-profile-activity-feed.html',
        controller: function($scope) {
            $scope.Activityfeeds = Activityfeed.get();
            $scope.Activityfeeds.$get().then(function(v){
                var maxHeight = Math.max.apply(null, angular.element("#activityfeeddetails").find(".course_thumb_outer").map(function (){
                    return $(this).height();
                }).get());

                angular.element("#activityfeeddetails").find(".course_thumb_outer").css("height",maxHeight);
            });         
        }
    };
}]);

Answer â„–1

To resolve this issue, simply adjust the min-height property instead of the height property. This way, all elements will have the same height as the element with the maximum height.

Replace this line:

angular.element("#activityfeeddetails").find(".course_thumb_outer").css("height",maxHeight);

With the following:

angular.element("#activityfeeddetails").find(".course_thumb_outer").css("min-height",maxHeight);

That should solve the issue.

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

Implementing a loading spinner while using AngularJS $http.get request with the help

I'm looking to display a spinner while making an $http.get request. Here's a snippet of my code : AngularJS section : var portalSDM = angular.module('portalSDM', ['ui.router', 'agGrid', 'angular.filter', ...

Tips for utilizing the "Sign In with Apple" feature through Apple JS

For implementing "Sign In with Apple" on a web platform using Apple JS, you can refer to the code example available at this link. Now, the query arises: where can I find the Client ID required for this process? I have tried using the app id identifier fro ...

Using JavaScript within WordPress to achieve a seamless scrolling effect

I am seeking to implement a Smooth Scroll effect on my website located at . The site is built on WordPress and I am facing difficulty in connecting JavaScript/jQuery in WordPress. I have come across various WordPress plugins, but they either do not meet my ...

JQuery integration resulting in disappearance of Input-group-btn element

Allow me to explain my current project. I am in the process of developing a Modal that enables users to input a password There will be an option to toggle between showing or hiding the text in the password field using a button positioned on the right sid ...

What is the best way to store the dom in cache to ensure that the page remains unchanged when navigating back using the back button?

When adding models to my JavaScript application's model collection using AJAX calls, I encounter an issue where if I click on a model and go to the next page, all the loaded models disappear when I hit the back button. What is the most effective way t ...

Retrieve data from the api

Can someone provide the JavaScript code to loop through an API, extract the coordinates/address, and map it? Here is a simple demonstration of fetching the API data: const fetch = require("node-fetch"); fetch('url').then(function (resp ...

Set the div element to be horizontally aligned

Is there a way to make this display horizontally instead of vertically, from left to right rather than top to bottom? I attempted using display:flex but only the extra-text class is affected and not the outer div. https://i.stack.imgur.com/2DNoC.png .m ...

When hovering or mousing over, the text remains stationary and does not follow the scroll bar movement within the

A method I am using involves displaying additional data on hover for a shortened header, like this: Hover behavior However, the text shifts across the page when the scrollbar is used, as shown here: Scrollbar interaction This table showcases HTML, CSS, ...

Create an AngularJS task manager that saves your to-do list even when the page is refreshed

Currently, I am developing a straightforward to-do list application using AngularJS within an ASP.NET MVC template. Surprisingly, I have successfully integrated Angular and Bootstrap to achieve the desired functionality. The app allows users to add and re ...

Vue-Apollo - The 'value' property is not present in the 'Readonly<Ref<Readonly<any>>>' type

MY CURRENT DILEMMA: In my quest to seamlessly integrate vue-apollo v4 with Typescript, I have encountered a challenge. I am in the process of retrieving data from a simple query using useQuery along with useResult. The default return type of useResult i ...

Having trouble positioning the button on the right side of the page and aligning the text in the center of the page

Having trouble positioning the button to the right of the page and aligning the text in the center, despite adding CSS properties such as float: right. <div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padd ...

How can AngularJS handle multiple routes using unique templates while sharing the same controller?

I am currently researching whether I can achieve the functionality described in the title. Here are my initial thoughts: Let's consider the following routes I have set up: .when('/', { templateUrl : 'partials/homepage.html&ap ...

Jquery starts functioning properly after the second click and continues to work flawlessly

Despite being a functional script, it only starts working on the second click instead of the first as intended. function change_text() { var button = document.getElementById('toggle_button'); if (button.innerHTML === "Edit") { button.inn ...

Troubleshooting a problem with a CSS dropdown menu

For the past couple of hours, I've been trying to troubleshoot the issue with the fly-out menu on the homepage of this website. When hovering over the capabilities link, the fly-out works correctly but the main background doesn't stretch to fit ...

The HTML object is experiencing difficulties with the Ajax page loader feature not functioning as

I attempted to use the code below in order to show an Ajax loader image while the page loads into an HTML object. Unfortunately, it didn't work as expected and I'm having trouble figuring out why. Everything seems to be functioning correctly exce ...

Is there a way to connect and interact with a different ng-controller's ng-model within a separate ng-controller?

Is it possible to access the ng-model from another ng-controller and if so, how can it be done? In this scenario, I am using two controllers. The first controller has a model called mddl1, while the second controller does not have any other model. However, ...

When viewed on a mobile device, the entire HTML document is resized to occupy less than half of the

Whenever I adjust the size of my webpage on different devices or mobile phones, I notice that the <div> tag appears to be only half (or even less) the width of the page. This gap seems to increase as the window size decreases. Refer to the screenshot ...

Executing an Ajax callback function to navigate to a different page

I must handle ajax errors globally by capturing 901 error codes in my header.jsp. There is an error message displayed in the browser console: GET https://localhost:8443/SSApp/Pan/report?&vessel…namax%20Tanker%20Pool%20Limited&rptTitle=Activit ...

Looping through an array asynchronously and returning the result

I'm having some trouble with an asynchronous loop. Here's the code I've been working with: let items = []; data.forEach(async item => { var newItem = new Item(data); newItem.options = await this.fetchOptions(data[" ...

Switch modules based on user options

My goal is to process an array of image files. I have the option to select them randomly or one by one (queue) based on the configuration specified in the config.json. To start off, I create the processor and determine the appropriate image selection modu ...