CODEWITHSUNDEEP
javascripthtmlcssangularsass
devludo
devludo

Reputation: 123

How to prevent angular component to scroll page instead of table?

I have this page like image below: table

FYI:

All i want is to assign a value inside the [height]="" in the HTML component page that is dynamic so that the height of the table resizes based on how much space there is left in the page.

Could also use TypeScript to do that and maybe calculate the height each components takes in the page except the table and do calculations on that.

Can anyone help me here, i've been stuck on this for two hours.

Upvotes: 0

Views: 1423

Answers (2)

devludo
devludo

Reputation: 123

I found a solution to this here's what i did:

Creating a @ViewChild() to gather the div element in my .ts:

  @ViewChild('pivotFilter', { static: false }) stickyHeader?: ElementRef;

Here:

  • The div has an id="pivotFilter"
  • Using ViewChild we can get the HTML element

Declaring getter to calculate table height:

get filterHeight() { return window.innerHeight - (this.stickyHeader?.nativeElement.offsetHeight + 88); }

Here:

  • window.innerHeight is the height of the page
  • this.stickyHeader?.nativeElement.offsetHeight is the height of my component
  • That + 88 is the rest of the page height (the title, and the space between filter and table)

I had to run change detection on content initialization to prevent errors like so:

ngAfterContentInit(): void {
    this.cd.detectChanges();
  }

Then i just applied the height to the html page. Hope this helps someone, cheers !

Upvotes: 0

bcngr
bcngr

Reputation: 845

You could use some css for what you need.

Use display: flex to distribute the sections as you need (top section fixed and bottom section with dynamic height).

And use overflow: auto to set the scroll in the table container only.

Example:

https://codepen.io/bcngr/pen/wvXdWBE

<div class="main">
  <div class="filters-container">
    <span>Filters</span>
  </div>
  <div class="table-container">
    <div class="table">
      <span>Table</span>
    </div>
  </div>
</div>

html, body {
    padding: 0;
    margin: 0;
}
.main {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.filters-container {
    background-color: #edf2f4;
    height: 100px;
}

.table-container {
    flex: 1;
    overflow: auto;
}

.table {
    background-image: linear-gradient(#8d99ae, #2b2d42);
    height: 600px
}

Upvotes: 2

Related Questions