Adjusting the height of an element in AngularJS based on its width dynamically

Question

Adjusting the height of an element in AngularJS based on its width dynamically

I am working on a table that is generated using ng-repeat, and I want to ensure that each td in the tbody is square. Since all the tds have an equal width, I only need to adjust the first one. However, the size of the table and td will change when the window is resized due to the dynamic nature of the page.

I have included a stylesheet in the head.

<style type="text/css">.squerify>tr{height:60px;}</style>

To change the height dynamically, I am using the following script:

document.styleSheets[1].cssRules[0].style.height=document.querySelector('.squerify td').offsetWidht+"px";

This script works as intended, but I am curious about how to get Angular to notify me when the width of the td changes (I was considering using the 'onresize' window event).

While the onresize event may work for now, I am concerned about the initialization process. I have not yet discovered a way to have Angular notify me when it has completed all its operations.
PS.: The table is visible on the screen, in case that impacts anything.

These are the questions I have:

Is there a more effective way to monitor page resizes in Angular?
What is the best approach for the initialization of the table?

javascript css angularjs

Answer 1

Answer №1

If you are looking to create square elements, here is a simple guide for you:

Start with a base element (such as a div) and give it a class (for example, square) to make it a square:
```
<div class="square"></div>
```
Next, insert an img tag inside (make sure to include the "data:..." link, as it is necessary for a 1x1px transparent image):

Now, add some CSS:

.square img{
    width: 100%;
    height: auto;
    border: 0;
}

.square *:not(img){
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

And there you have it, creating square elements is that simple!

Answer 2

If you are looking to create square elements, here is a simple guide for you:

Start with a base element (such as a div) and give it a class (for example, square) to make it a square:
```
<div class="square"></div>
```
Next, insert an img tag inside (make sure to include the "data:..." link, as it is necessary for a 1x1px transparent image):

Now, add some CSS:

.square img{
    width: 100%;
    height: auto;
    border: 0;
}

.square *:not(img){
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

And there you have it, creating square elements is that simple!

Adjusting the height of an element in AngularJS based on its width dynamically

Answer №1

Similar questions

Unit Testing JWT in Angular 2

Listener document.addEventListener (function() {perform the function as shown in the illustration})

I'm puzzled as to why the color isn't showing up on my navigation bar even though I used "padding: 10px !important;"

Is there a way to access the value variable from a JavaScript file located in the javascript folder and bring it to the routes/index.js file in a Node.js and Express application?

Choosing a random element in React: A step-by-step guide

Press the Enter key to generate a new table row

Generate an image on Canvas using a URL link

What is the best way to execute a method in a component for each iteration in an *ngFor loop in Angular 2

Stylish CSS animation enhancing an image

Following the execution of the Ajax function in JavaScript, the functionality of the

Searching for real-time data with ajax. Strategies for showing alternative results when there is no user input

Implementing an Express server within Angular application directories

What is the best approach for handling nested conditional statements?

The navigator's userAgent property is used to match specific handset identifications

Improving the method of accomplishing a task using AngularJS

The burger icon in the navigation bar is malfunctioning, showing just a single horizontal line instead

Sending a list of data using ajax to an external PHP script for deferred rendering in datatables

Issue encountered when attempting to pass more than one route parameter in a URL path

What is the best way to delete an added element once a DIV has been toggled with JQuery?

Utilize JavaScript to send an email containing a link and content