The Angular framework seems to be causing a problem with a Bootstrap column that is supposed to fill 100% of the width

I am currently working on a page that consists of a side navigation bar and a content area. Here is a basic representation of its layout:

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

[https://jsfiddle.net/hd46twu1/6/][2]

While redeveloping the same application using Angular, I am facing difficulties in making the content area expand to fill the entire available width. Here is what it currently looks like:

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

https://stackblitz.com/edit/angular-89rbp4

Could someone provide guidance on how to ensure the column stretches in Angular just as it does in the non-Angular version of the application?

cssangulartwitter-bootstrapflexbox

Answer №1

To make the main div fill the entire width, you can either wrap it in a div with a width of 100% or add the full-width class directly to the main directive.

// app.component.css    
    .full-width {
      width:100%
    }

In the html :

<div class="wrapper">
  <app-navbar></app-navbar>
  <div class="full-width" >
  <app-main></app-main>
  </div>
</div>

Check out this stackblitz example for reference: https://stackblitz.com/edit/angular-kya7fk?file=src/app/main/main.component.html

PS: If you want to stretch it vertically as well, you can also apply height: 100%. See the updated stackblitz for a demonstration :)

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

Aligning the span element vertically

Having issues with vertical alignment and looking to centralize my <span>›</span> element vertically. Check out the code here: http://jsfiddle.net/vpVEf/ Is there a way to automatically center it like the "li a" in this example? The a elemen ...

css

Is it feasible to utilize the redirectTo function alongside the children parameter?

It's important to note that in the latest version of @angular/router 3.0.0-rc.1, you are unable to use the redirectTo parameter if you are also utilizing the children parameter. In some scenarios, such as my own, there may be a need for this function ...

angulartypescriptroutesangular2-routing

Using Angular to create a single component instance that can be displayed multiple times within the same application hierarchy through modal

I have a scenario where there is an application with componentA (with selector 'dyn-form') responsible for generating a dynamic form. I utilized this to create the form page... On this form page, when a button is clicked, a dynamic component is l ...

angular

Facing issues while trying to update Angular from version 12 to 13 due to conflicting peer dependencies

I'm in the process of upgrading an Angular project from version 12 to 13, following the guidelines provided on the Angular update website https://update.angular.io/?v=12.0-13.0. Before starting the upgrade procedure, this is how the package.json file ...

angular

What causes hyperlinks to fail in certain emails when opened in new tabs on Outlook Webmail?

After opening an email in a new tab on Chrome from Outlook 365 web app, I noticed that some hyperlinks stop working. Strangely, for certain emails I received, the hyperlinks work fine. I create these emails using Power Automate and the HTML code I use is: ...

htmlcssgoogle-chromeoutlook-web-app

Enabling graphs to extend to the full height of their parent container

As I construct a Dash layout using flexboxes, I've discovered their utility. However, an issue arises when attempting to adjust the size of charts to perfectly fit within a Dash card since I'm uncertain about the default dimensions of the graphs/ ...

cssflexboxplotly-dash

Error message "route is not defined" appears during Angular 2 deployment on IIS using Visual Studio 2015

Currently, I have a .Net Core project in Visual Studio 2015 (update 3) that utilizes Angular 2. It runs smoothly within Visual Studio using IIS Express on my Windows 10 professional PC. However, upon attempting to deploy the application to my local IIS ins ...

iisangularvisual-studio-2015asp.net-core

Switching class on a specific element in Angular 2

My element list appears like this: <ul *ngFor="let period of periodsDate"> <li [class.show]="isShown" (click)="toggleClass()"> <a>{{ period.id }} </a> </li> </ul> ...

javascriptangulartypescript

AngularJS remove a row from a table disrupts the formatting

Hello! I am attempting to delete rows from a table in Angular. I want the first two rows to have a red background and the rest to have a white background. If I try to delete the last row, it gets deleted but the color remains for the first row only (it sh ...

javascriptjqueryangularjshtmlcss

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

javascriptcssangularjs

html how to delete the beginning and end of hr element

There is a <hr noshade> tag in my HTML code which does not have any effect on the web view. However, when I print it to a PDF file, it shows head and tail like this: https://i.stack.imgur.com/TaBAc.jpg Here is my CSS that applies styling when print ...

htmlcss

The selection made in the drop-down menu fails to redirect to the specified link

After implementing a dropdown menu in bootstrap with links set using PHP code to specify the path, I encountered an issue. Even after attempting without PHP, the result remains the same - when selecting an item and clicking the submit button to pull the ca ...

phphtmlcssbootstrap-4

JQuery - stylish vertical accordion navigation menu

I'm currently working on a vertical accordion-style sidebar navigation system. Everything seems to be functioning properly, but I've encountered some issues with the icons that I'm using from Twitter Bootstrap 3. You can view the code on th ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Despite using the same CSS and HTML code, the fonts appear distinct from each

Feeling lost here, not understanding what's going on. I made changes in Elementor on my first PC and later noticed that the font looked a bit different. I tried to revert the changes but had no luck. I also work on my second PC where the browser showe ...

htmlcssfonts

Combine three images and position them in the center of a flexible container

Looking for assistance with overlapping 3 images and centering them within a twitter bootstrap row-fluid div. Here is an example of the desired outcome: The solution can incorporate javascript, however it is preferred to avoid it. It is also important tha ...

csshtmltwitter-bootstrap

Is there a way to create a smooth opacity animation for a background image?

https://i.sstatic.net/PuxYm.jpg I am attempting to create a simple animation on my header using pink red lines that I want to make disappear and reappear on a keyframe. However, when I apply my styles, the entire container is animated instead of just the ...

htmlcssbootstrap-4

Issues encountered during the configuration of Angular 8 Route (Auth) Guards

I recently attempted to incorporate Route Guards into my web application but encountered numerous errors along the way. Can anyone pinpoint where I might have gone wrong? My web app features various routes, one of which is a dashboard that requires protec ...

angularauthenticationauthorizationangular8angular-route-guards

The checkbox label should be centered directly beneath the checkbox

I'm feeling a bit lost. I came across this code snippet on jsfiddle: https://jsfiddle.net/rx90f38u/1/ There seems to be some styling included, but I can't figure out why the "remember" me text is showing below the checkbox. The checkbox and it ...

htmlcssformscheckbox

Scrollspy in bootstrap incorrectly highlights the navigation item as active

I seem to be having an issue with bootstrap scrollspy. For example: <header class="header pb-4 pb-lg-0 pt-4 sticky-top bg-white"> ... </header> <div class="container-fluid width content-main" data-bs-spy=" ...

cssbootstrap-5

Kindly include an @Ionic3Annotation for either @Pipe, @Directive, or @Component

During development, this code runs without any issues. However, when attempting to run it in production using the command: Working: ionic cordova run android Not working: ionic cordova run android --prod --release Error Message: [03:34:41] types ...

angulartypescriptionic-frameworkionic3