Setting Up Background Colors in Angular 4

I'm attempting to create a background color that fills the entire page. I've set it in the body tag, but when I add background-color: blue, it doesn't cover the whole background as intended. Instead, it only fills the background of the elements within this div.

<body [ngStyle]="{'height': '100%', 'margin': '0'}">
  <!-- App-root represents the html code below <div [ngStyle} and so on -->
  <app-root></app-root>
</body>

<div [ngStyle]="{'background-color' : 'blue', 'height': '100%'}">
<header>
    <nav class="navbar navbar">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="active"><a routerLink="">Home Page</a></li>
          <li><a routerLink="/schedule">Schedule</a></li>
         <li><a routerLink="/aboutus">About Us</a></li>
         <li><a routerLink="/contact">Contact</a></li>
       </ul>
     </div>
   </nav>
  </header>
<router-outlet></router-outlet>
</div>

The behavior of the background color can be seen here:

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

Answer №1

At this moment, I am unable to replicate the issue you are experiencing. However, here is a suggestion that might help: Try setting display: block on app-root by using :host {display: block} in your app.component.css

Here are three alternative solutions to consider:

1) Instead of using height: 100%, try styling body with min-height: 100vh

2) Apply position: absolute to your app-root and ensure it fills the screen by using

bottom: 0; top: 0; right: 0; left: 0;

3) Utilize display: flex on body and display: block; flex: 1; on your app-root

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

Block with vertical text covering entire height

I need to place an additional block with 100% height and vertical text (bottom-to-top direction) inside a variable height block, aligning it to the left side without using width and height calculations in JS. Is there a way to achieve this using CSS transf ...

Using Angular, is it possible to dynamically incorporate controls into an existing template based on datatype conditions

Looking for a solution using Angular4: I currently have multiple if statements in my component's template, and anticipate adding more in the future. To streamline this process, I am interested in implementing a factory class that generates templates b ...

Placing error notifications beneath my table rows for a more polished appearance

In the process of creating a review page for my app that showcases uploaded files, I've encountered an issue. Whenever a user uploads files with errors, I want to display a warning message below each specific file. Currently, I'm able to show the ...

What is the best way to smoothly switch from one Font Awesome icon to another?

I am working on an HTML button with the following code: <button id="sidebar-toggle-button" class="btn btn-primary header-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample&q ...

Initial value not being recognized by mat-input attribute disable

My current challenge involves toggling the enable/disable status of mat-inputs based on a specific property value within an object. Within my component, I am subscribing to an observable in my service that retrieves applications with a default disabled fl ...

Aligning images with absolute CSS to text that is wrapping positions the images perfectly alongside the text content

My webpage has a long content section that resizes based on the browser width. Here's an example: <h1 id="loc1">Title</h1> <p>bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bod ...

Prevent child div from resizing along with parent div during a resize event by utilizing the .resizable()

Check out this example here I am able to resize the div using jQuery, but I don't want the #spacer to have a fixed width at first because the content of the could vary in size. Even if I remove: width:100px; and try setting it to a percentage or ...

Encountering a peculiar error when transitioning from Angular 10 to 11

Recently, I set out to update my project with version 11 of Angular. However, I encountered an issue during compilation. My approach involves injecting CSS from the node_modules directory into my solution by modifying the angular.json file. "s ...

Slide the toggle icon to activate the add-to-cart button on click!

Is it possible to achieve the functionality of sliding a plus icon to an add to cart button on click, instead of hover? I have attempted using CSS without success. Would JQuery be able to accomplish this task? codepen.io HTML <div class="socialIcons" ...

Develop custom Angular applications using the CLI by creating a new schematic in Nx and setting up the Angular configuration

Currently, I am working within a nrwl/nx monorepo where my applications have custom configurations set in the angular.json file. One specific customization is the output path. Now, I am looking to create my own schematic that can configure my project accor ...

Angular 12's 'ng serve' feature seems to be taking its time building apps, almost mimicking the slower pace of production

After upgrading my app from Angular 11.2.7 to Angular 12, I've encountered a frustrating issue. While everything runs smoothly, the rebuild times during development using 'ng serve' have slowed significantly. My M1 iMac, running node 16.1.0 ...

Achieving effective targeting of the second segment within a string enclosed in a span tag through increased specificity

When it comes to styling elements, the easiest way is to use classes and assign the properties needed. However, 1. I'm not a huge fan of creating classes all over the place. That's what specificity and CSS mapping are for. 2. Going thro ...

How to create an Angular 2 template HTML loop to check for true or false in an

For example: Here is a sample Object: { "Person": { "Name": {}, "Hobbies": { "0": { "Description:Soccer": {}, "IsActive:false": {} }, "1": { "Description:Hockey": {}, "IsActive:false": {} ...

What could be the reason I am unable to view the outcome in the table? PHP rectangle area

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Area Calculation for Rectangle</title> </head> <body> <div class="container" > <form action=&qu ...

Pagination in PrimeNG datatable with checkbox selection

I am currently working on incorporating a data table layout with pagination that includes checkbox selection for the data. I have encountered an issue where I can select data on one page, but when I navigate to another page and select different data, the s ...

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over: .collection { position: relative; overflow: hidden; } .collection:hover #overlay { position: absolute; opa ...

Hover Effect for 3D Images

I recently came across an interesting 3D Hover Image Effect that I wanted to implement - https://codepen.io/kw7oe/pen/mPeepv. After going through various tutorials and guides, I decided to try styling a component with Materials UI and apply CSS in a differ ...

What could be the reason for the hover class not functioning properly in Tailwind?

Looking for some help with styling a button in Next.js using Tailwind. Specifically, I want the background color of the button to change when hovered over. I've been experimenting with code like this: <button className="rounded-full bg-gradie ...

Solving runtime JavaScript attribute issues by deciphering TypeScript compiler notifications

Here is a code snippet I am currently working with: <div class="authentication-validation-message-container"> <ng-container *ngIf="email.invalid && (email.dirty || email.touched)"> <div class="validation-error-message" *ngIf=" ...

What is the best way to hide my rectangle in HTML?

Just starting out with Wix for my website. I have a block of HTML code that creates a blue rectangle, but I want it to disappear automatically after 30 seconds. What additional code do I need to achieve this effect? Also, is there any unnecessary code I c ...