Determine the dynamic height of content in a TypeScript file

Could you please provide guidance on obtaining the height of the content within this particular div element?

For example, I need to calculate the dynamic height of the content.

https://i.sstatic.net/2kNk3.png

code

.html

<div class="margin-top-47 margin-horizontal-10" #hello>
//content here
</div>

I have attempted several methods without success so far. Any hints or suggestions, please?

.ts

@ViewChild('hello', { static: false }) hello: ElementRef;

  ngAfterViewInit(): void {
   
    const xx = this.hello.nativeElement as HTMLElement;
   
    const contentHeight = xx.clientHeight;//it shows 0

    //const contentHeight = xx.scrollHeight;//it shows 0 too.
    
  }

console.log displays the following:

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

htmlcssangulartypescriptionic-framework

Answer №1

Have a look at this...

@ViewChild('hello', { static: false }) hello: ElementRef|any;

ngAfterViewInit(): void {
   
    const element = this.hello.nativeElement as HTMLElement;
   
    const height = element.clientHeight;
    console.log(height);

    
  }

Check out this HTML source

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

Verify the console log

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

Answer №2

In this scenario, I am utilizing the Sheet modal component from Ionic's framework. To ensure proper rendering of the modal's height, a delay of 500ms is necessary as demonstrated below.

.html

<div class="margin-top-47 margin-horizontal-10" #sheetModalContent >
 //content here
</div>

.ts

@ViewChild('sheetModalContent ', { static: false }) sheetModalContent : ElementRef;

ngAfterViewInit(): void {
    setTimeout(() => {
      const sheetModalContent = this.sheetModalContent.nativeElement as HTMLElement;
      const sheetModalContentHeight = sheetModalContent.scrollHeight;
      console.log(`sheetModalContentHeight`, sheetModalContentHeight);//438
    }, 500);
  }

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

JavaScript is incapable of locating image files

I am encountering Resource Not Found errors for the image files I am attempting to load into var manifest. Despite following the tutorial code closely, I can't seem to identify what is causing this issue... (function () { "use strict"; WinJS.Bin ...

javascripthtmlwindows-8

Angular2 Error: Issue with the "match" function in JavaScript

Why am I receiving a typeerror that says "cannot read property of 'match' undefined"? var numInput = document.getElementById('input'); // Listen for input event on numInput. numInput.addEventListener('input', function(){ ...

javascriptangulartypescript

What role does typescript play in this approach?

test.js const testList = [1, 2, 2, 4, 5, 2, 4, 2, 4, 5, 5, 6, 7, 7, 8, 8, 8, 1, 4, 1, 1]; const lastIndex = testList.findLastIndex((e:number) => e === 100); // Property 'findLastIndex' does not exist on type 'number[]'. Did you mean ...

typescript

Styling in Svelte/TS does not change when applied through a foreach loop

I've been experimenting with creating a unique "bubble" effect on one of my websites, but I'm facing difficulty changing the styling in a foreach loop. Despite no errors showing up in the console, I'm at a loss as to how to effectively debu ...

csstypescriptsveltestyling

CSS DROP DOWN NAVIGATION MENU - Struggling to maintain hover effect on main menu item while navigating through sub-menu

I am facing a challenge with a CSS-only drop-down menu where the top main menu item loses its highlight when I move the cursor over the sub-menu items. You can view the menu in action here: . For example, if you hover over "Kids" and then move your cursor ...

css

Tips for displaying an mp4 video using an HTML video tag when the video is uploaded through Multer

I am encountering an issue while trying to play a video on my website. The video is uploaded through multer using node.js and in the express framework. The file gets inserted into the database and assigned a specific folder with a filename like 1b47c24b20c ...

node.jshtmlexpressvideomulter

Error with Angular PWA: A fatal error has occurred as the module '@schematics/angular/utility' cannot be located

Trying to execute the command below has been giving me trouble: ng add @angular/pwa Every time I run it, an error pops up saying: An unhandled exception occurred: Cannot find module '@schematics/angular/utility' I attempted to install @schemati ...

angularprogressive-web-apps

utilize a modal button in Angular to showcase images

I am working on a project where I want to display images upon clicking a button. How can I set up the openModal() method to achieve this functionality? The images will be fetched from the assets directory and will change depending on the choice made (B1, ...

htmlangulartypescriptmodal-dialogassets

Generating images with HTML canvas only occurs once before stopping

I successfully implemented an image generation button using Nextjs and the HTML canvas element. The functionality works almost flawlessly - when a user clicks the "Generate Image" button, it creates an image containing smaller images with labels underneath ...

javascripttypescriptnext.jshtml5-canvasdynamic-image-generation

The function will not be triggered when the form is submitted

I've set up this form to send data to the server-side. It's built in HTML/CSS with AngularJS as well. I made sure that the button is placed inside the form, a common mistake that can cause issues. However, despite my efforts, the function "onAddE ...

javascripthtmlcssangularjsweb

Utilizing React Native Camera Kit allows for the seamless and continuous scanning of QR codes, offering multiple callbacks when a code is

Attempting to integrate a QR code scanner into my project using react native. Utilizing the plugin react-native-camera-kit, which supports both QR and Bar code scanning. However, I am facing an issue where the scanner continuously scans the code and trig ...

javascripttypescriptreact-native

How can you leverage Beautiful Soup to extract data from a specific CSS class on a webpage?

In the process of scraping this html with code, my main objective is to extract the link from it using Selenium driver. html = driver.page_source soup = BeautifulSoup(html) file_link = soup.select(".inpfilelink") return file_link print file_upload("/hom ...

pythonhtmlbeautifulsoup

Display and conceal table columns dynamically in Vue by utilizing the Vuetify data table functionality

Looking for an example: How to show hide columns of vuetify data table using v-select list I have created something similar, but I'm facing an issue where the table doesn't refresh when changing the header data: https://codepen.io/Meff1/pen/vY ...

typescriptvue.jsvue-componentvuetify.js

Is there a way to limit the keys of T to only number fields, where T[keyof T] is a number

I'm looking to restrict the field parameter within this function: function calculate<T>(source: T[], field: keyof T) { for(const item of source) { } } The goal is to ensure that item[field] will always be a number. Is there a way to ac ...

typescript

Position the Bootstrap 5 navbar at the top of the page and set it

Is there a way to use the fixed-top class on a navbar without making it full width and overlapping the container? This is the code: <div class="container" style="border: 1px solid;"> <nav class="navbar fixed-top n ...

cssbootstrap-5

The active tabs or placeholders do not update properly when I click on them

Is there anyone who can help figure out why the tabs are not functioning as expected? The goal is for the tabs to change the input field placeholder and perform a search based on the active tab. If you're able to assist, please review my complete cod ...

javascripthtmlcss

Managing sessions in Typescript using express framework

Hey there, I'm just starting to learn about TypeScript and I have a question about how sessions are handled in Typescript. Could someone please explain the process of session initialization, storing user data in sessions, etc.? If you have any tutoria ...

node.jstypescriptexpresssessionsession-management

What method can be used to inherit the variable type of a class through its constructor

Currently, I am in the process of creating a validator class. Here's what it looks like: class Validator { private path: string; private data: unknown; constructor(path: string, data: string) { this.data = data; this.path = path; } ...

typescript

Animating a div in CSS3 to expand horizontally from left to right without affecting its original position

I am currently in the process of developing a calendar using HTML, CSS, and JavaScript. The main purpose of this calendar is to showcase upcoming and past events. However, I am facing difficulties in ensuring that my event blocks occupy the remaining space ...

javascripthtmlcss

Is it possible to rearrange an array by moving an element to the front

If I have an array as shown below, how can I move key [2] and its corresponding value to the front of the array? This would make it key [0] and increment the other keys by 1. Current: [0] => Array ( [name] => Vanilla Coke cans 355ml x 2 ...

phphtmlarrays