Why my Angular app is not setting background correctly when 2 or more components inside?

user_760893 0
Viewed 138

I have an app that contains 4 components inside it:

<div [@routerTransition] class="position-relative overflow-hidden pt-3 m-md-3">
  <div class="mx-auto mb-5 pb-1 container">
    <app-set-vehicle-details id="step1" (step1Finished)="enableStep2($event)" (busy)="setBusy($event)"></app-set-vehicle-details>
    <app-product-selection id="step2" *ngIf="step2Enabled"></app-product-selection>
    <app-product-details id="step3" *ngIf="step3Enabled"></app-product-details>
    <app-customer-details id="step4" *ngIf="step4Enabled"></app-customer-details>
   </div>
 </div>

My view is supposed to look like this:

enter image description here

That corresponds to the app-set-vehicle-details component. Note the grey background there. But when the second component is added, the background turns white:

enter image description here

But don't understand why this background is changing like that. Some css attached:

.theme-main [_nghost-etm-c5] {
   background-color: #F0F0F7 !important;
   color: #4D4F5C !important;
}

enter image description here

This is a screen capture of the main container:

enter image description here

I find no reason why the white part is appearing. The only thing that happens is that the second component appears dynamically, after an action. I'm not sure if that's the responsible of that height reprint?

Thanks for any help in advance!

To clarify a little bit:

  • Styles are being retrieved from a custom library, called styles.scss

  • This is the style applied to the body:

So h-100 from Bootstrap, what produces:

enter image description here

But still not working... Any ideas?

bootstrap-4 angular css html
3 Answers

In your case, I suggest setting the background color for .pb-1 class in the main component CSS file. Every Angular Element would be affected by common CSS (like bootstrap library) and its own CSS which reads from the CSS file of the component. The latter is specific to that component and wouldn't affect other components CSS even if they have shared class names.

user_112616930

Have you checked the height of your body? The body doesn't update it's height when components are added so the height of your component is limited to the height of the body. To avoid that, set the min-height of the body & html in your global css file to 100% like so:

body, html {
  min-height: 100%;
}
user_131960060

set background color on the body tag in styles.css

body {
background-color: grey !important; /*Add the color you want to set */
}

you can also do this for the main div using some class

user_148866710
Related