How do you align everything properly in Angular?

Question

I am trying to do some hands on in Angular 5. I am little familiar with Bootstrap.

Here as you can see the image, I am trying to create different components.

Few of the components are inside the other.

As you can see, are the components I have declared here.

import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { ChatWindowComponent } from './chat-window/chat-window.component';
import { TextSideComponent } from './chat-window/text-side/text-side.component';

And the chat-window.component.html is here

<div class="container-fluid bg-danger">


  <div class="row">
    <div class="col-4">
      hi
      <app-text-side></app-text-side>
    </div>
    <div class="col-8">
      yes hope this works
    </div>


  </div>


</div>

But i wanted to extend this red component till the bottom of the screen. so that the size of this component is of full window. So i added bootstrap classes .position-absolute .h-100 to the container of the ChatWindowComponent. Like this.

<div class="container-fluid bg-danger position-absolute h-100">


  <div class="row">
    <div class="col-4">
      hi
      <app-text-side></app-text-side>
    </div>
    <div class="col-8">
      yes hope this works
    </div>


  </div>


</div>

And i got this output.

But as you can see, there is a scroll bar.

It expanded further below so basically ignored the height of the nav-bar.component and started 100% window height from the ChatWindowComponent(container).

I have tried using calc functions to calculate the height but of no vein.

Is there a better approach for this? cos i can't calculate the nav-bar.component height always. it may vary.

Is there a better way of understanding Angular from CSS perspective? How to make it responsive or suppose one more component comes up below (footer)? Then how do I adjust the ChatWindowComponent again?

Is everything hard-coded CSS using fixed?

Any insights on how to align everything properly in Angular?

Answer 1

Well, i was unaware of CSS grid classes. The answer by Felix Helped me a lot. I feel it is a very good way to handle Angular code especially with all the components, sometimes even nested within each other.

My approach is follows.

.nav-bar {
    grid-area: nav; 
}

.chat-window {
    grid-area: cwindow; 
} 
.main-page {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%; 
    grid-template-rows: [row1-start] auto [row2-start] calc(100vh - 72px);
    grid-template-areas: 

      "nav nav nav nav"
      "cwindow cwindow cwindow cwindow"; 
}

As you can see, I've used grid approach and declared the layout fixing the height and then i put components inside div like this.

<div class="bg-dark main-page ">
  <div class="nav-bar">
    <app-nav-bar></app-nav-bar>
  </div>
  <div class="chat-window">
    <app-chat-window></app-chat-window>
  </div>
</div>

And then In the respective component I can again declare grid layouts and play around. The height:100% inside grid container makes the components responsive vertically as well.

Now this is my chat-window component.

.full-height {
   height: 100%;
}

.box {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto 40px;
    grid-template-areas: 
      "mwindow mwindow owindow owindow owindow owindow"
      "mbox mbox owindow owindow owindow owindow"
}
.message-window{
    grid-area: mwindow;
}
.message-box{
    grid-area: mbox;
}
.output-window{
    grid-area: owindow;
}

And my final output was something like this.

I would like to say, Grid system is really a nice way to look into things in CSS. It is very powerful and very effective in Angular and I hope it is the best approach.

Answer 2

i think you should take a look at css grids.

with css grids you can tell your content exactly how much space it should use and you can even define areas which act like a container for a certain element

https://css-tricks.com/snippets/css/complete-guide-grid/