Angular components are not properly adhering to the specified height and width dimensions for child elements

I seem to be having trouble applying height/width to a child component in angular. Can someone take a look and point out where I may have gone wrong?

app.component.html

<app-child [width]="10" [height]="10"></app-child>

.child.ts

import { Component, OnInit, Input, ViewEncapsulation, Renderer2, ElementRef } from '@angular/core';

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  constructor(private renderer: Renderer2, private elRef: ElementRef) { }

  @Input() width
  @Input() height

  ngAfterViewInit() {
    this.renderer.setStyle(this.elRef.nativeElement, 'height', this.height + "%");
    this.renderer.setStyle(this.elRef.nativeElement, 'width', this.width + "%");
  }
}

.child.html

<div class="wrapper" [style.width.%]="width" [style.height.%]="height">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Issues : 

app-child component still takes full width and hight it should be 10% div inside app-child taking correct width but height is still 100%

Example link

https://stackblitz.com/edit/angular-qgobau

Answer №1

If you're struggling with height percentage not functioning in CSS, be sure to check out this helpful link: Height percentage not working in CSS

To resolve the issue in your child component, make sure to include the following code in your CSS:

html, body {
   height: 100%;
}

Answer №2

The problem you're encountering is related to CSS. While your component is correctly utilizing values of 10%, you also need to establish a height for the parent elements, such as the body or html. One potential solution is to define a fixed height for the html element, for example:

html {
height: 500px;
}

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

Strategies for incorporating a JSON variable into the HttpClient query parameters in an Ionic 5 application

Currently using Ionic 5 and attempting to retrieve the IP address of the client user to include it in a URL. Here is my code: this.ipclient = this.httpClient.get("https://api.ipify.org/?format=json"); this.ipclient .subscribe(ipclient => { console.log( ...

The functionality of both P and H1 tags seems to be malfunctioning

Can someone help me with changing the font family and size of my paragraphs and headings (p and h1)? Any assistance would be greatly appreciated. Feel free to review my code for any other errors as it has been a while since I last coded. html, body { ma ...

How to implement a custom pipe for dynamically changing image URLs in Ionic 3's image tag

I am trying to set authentication headers for images called from an image tag (<img>). To achieve this, I have created a custom pipe named secureimages using the command ionic g pipe secureimages. This pipe intercepts the HTTP requests in an interce ...

Issue with PrimeNG functionality in Angular4 environment

I encountered an issue while trying to implement PrimeNG into my Angular 4 project. Despite following the setup steps outlined on their website, I received an error message when attempting to import a module. Here's an example of the error: Can' ...

How can I trigger a click event with Ionic's ion-toggle and radio-group components

I am currently using Ionic3 and I would like to implement an HTML element (ion-toggle and radio-group) that triggers a JavaScript function upon clicking. As you can observe below, I have included an attribute ng-click as per the guidance provided here, bu ...

Guide to aligning a container to the left in Bootstrap 5

I have a grid container in Bootstrap 5 and I'd like to align it to the left on my webpage. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4b54e42f56b61a0acf40"&g ...

Is there a specific function that is triggered upon the successful completion of a subscription process?

I am facing an issue with the code below. The navigation is happening when a customer is created, instead of waiting for the address to be created successfully. Any assistance on this matter would be greatly appreciated. createCustomer(model: any) { ...

What is the process of extracting multiple attributes from an object that has been selected by a user using mat-options (dropdown list) in Angular?

Summary: A dropdown list contains objects, unsure how to capture multiple attributes of selected object. Current Implementation: I have successfully created a dropdown list that displays the details of an object retrieved through an API call: <mat-f ...

Using Angular2 cli along with material design, the error message "The argument `$map` in the function `map-get($map, $key)` must

After updating my environment with newer versions of @angular/cli and @angular/material, I am facing difficulties in getting my angular2 application to run. ERROR in ./src/app/components/general/table/table.scss Module build failed: undefined ^ ...

Utilizing checkboxes to toggle the visibility of a div element with varying headings

By toggling a checkbox, I aim to show or hide the same div with a different heading. $('#cbxShowHide').click(function() { this.checked ? $('#block').show(1000) : $('#block').hide(1000); }); #block { display: none; bac ...

Tips for utilizing specific backend properties exclusively in an ngrx store

As I embark on incorporating ngrx into a new enterprise Angular application, I am faced with the task of loading data into the store using a simple effect that triggers a service call. The response from the server upon successfully calling this service co ...

What is the best way to position a logo and navbar in alignment?

I'm still learning the ropes here. I'm having trouble getting the navbar to align with the logo because margin-top/bottom doesn't seem to be working for some reason. <HTML> <HEAD> <link href="style.css" rel="stylesheet"&g ...

The issue arises when trying to use the map function on ctorParameters, which

I recently installed Angular2CLI from Bitbucket. After running npm install, ng build, and ng serve, I encountered an error when trying to access localhost:4200. Uncaught TypeError: ctorParameters.map is not a function at ReflectionCapabilities.paramet ...

Creating an external link in Angular with query parameters

I have created an app where users have their addresses listed, and I want to implement a feature that allows me to open Google Maps when clicking on the address. However, I am currently facing an issue where instead of getting the actual value of {{ this. ...

The CSS float puzzle - text alignment dilemma

Recently, I created a simple float-based banner with tiles which you can see here on jsfiddle. However, I encountered a major issue with centering text in each tile. My goal is to have all the "Sample text" content centered both horizontally and vertically ...

As the page is scrolled upwards, the custom cursor's location shifts accordingly

In developing a custom hover cursor for my video div, I am encountering an issue where the cursor does not move with my mouse and remains in place when I scroll. Could someone please review my code and identify what I am doing wrong? Additionally, I have ...

Creating a Product Box design with CSS and incorporating visual elements

I have created a simple box design in Photoshop that I want to use to display product information. The box consists of a Header, Body, and Button, each as separate images. How can I assemble these elements using CSS/HTML? I only need the header text at th ...

Is there a way to ensure that my slideshow images maintain their proportions when viewed on various screen sizes?

I came across a code snippet for an image slideshow that I really liked, but it didn't resize properly on different browser sizes. Initially, I attempted to use the vh property to address this issue, but unfortunately, the images wouldn't scale p ...

Issue with Font Awesome (6.2) Duotone not displaying correctly in Bootstrap 5 breadcrumb divider

I attempted to modify the Bootstrap 5.2 breadcrumb divider and include a Font Awesome Duotone icon, but it is not displaying. I am unable to figure out what the issue might be. Any suggestions would be greatly appreciated. Thank you. One interesting disco ...

Adjust the width of an item on CSS Grid upon hovering

I recently created a basic CSS grid layout with the following structure... .container { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; } .col1 { padding:20px; background:red; color:white; text-align:center; } .col2 { padding:20px; ...