Fixed header getting hidden behind the navbar

Question

I am trying to implement fix header for my table in my angular 10 application. I have applied CSS and I can see that fixed header is working but it seems to hide behind the navbar when i try to scroll down. Please see the screenshot for more details . I tried manipulating the top property but doesnt seem to make a difference.

After scrolling

html table

<div class="container">
  <div class="row">
    <div class="col-12">
        <button class="btnAddCustomer" (click)="addCustomer()"> Add Customer (Template Driven) </button>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div *ngIf="customerDetails">
        <table id="customerdetails-table" class="table table-bordered table-striped">
          <thead>
            <th>Customer</th>
            <th>Company Name</th>
            <th>Contact Name</th>
            <th>Address</th>
            <th>City</th>
            <th>Postal Code</th>
            <th>Country</th>
            <th>Phone</th>
            <th>View Order</th>
          </thead>
          <tbody>
            <tr *ngFor="let custDetails of customerDetails">
              <td>{{custDetails.customerId}}</td>
              <td>{{custDetails.companyName}}</td>
              <td>{{custDetails.contactName}}</td>
              <td>{{custDetails.address}}</td>
              <td>{{custDetails.city}}</td>
              <td>{{custDetails.postalCode}}</td>
              <td>{{custDetails.country}}</td>
              <td>{{custDetails.phone}}</td>
              <td>{{custDetails.customerId}}</td>
            </tr>
          </tbody>
        </table>
        <pagination [totalItems]="totalItems" [itemsPerPage] = "5"  [maxSize]="maxSize" ></pagination>

      </div>
    </div>
  </div>
</div>

CSS

table {
  text-align: left;
  position: relative;

}

th {
 margin-top: 10px;
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

Adjust [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) property. — Jax-p, Jul 17 '20 at 15:35
this is typically the expected behavior. You want the table to be in front of the fixed nav bar? — Jeremy, Jul 17 '20 at 15:37
While scrolling , the header shouldnt get hidden behind the navbar. The header should remain fixed below the navbar — Tom, Jul 17 '20 at 15:40
As you can see the first image. Ideally the header should remain in that position — Tom, Jul 17 '20 at 15:42
At the moment the button on top of the table is also getting hidden and scrolling up — Tom, Jul 17 '20 at 15:43
Move it with javascript down for navabar height when it gets sticky.. — ikiK, Jul 17 '20 at 15:43
I am working on angular project and avoiding any javascript. Looking for pure CSS solution — Tom, Jul 17 '20 at 15:44

score 0 · Answer 1 · answered Jul 17 '20 at 15:58

0

You want the navbar to be infront of all your other HTML elements, it does not make sense to have another element overlap the navbar.

It sounds like you just want the table to be scrollable, if that's the case, put the table in a of fixed size (equal to the scrollable area that you want)

Example:

<div style = "height: 100px; width: 100px">
...your table stuff
</div>

Then add the functionality to make it so you can scroll through the table vertically by using the overflow-y property.

<div style = "height: 100px; width: 100px; overflow-y:auto">
...your table stuff
</div>

Making a div vertically scrollable using CSS

answered Jul 17 '20 at 15:58

Jake Chambers

513
2
6
22

Hello Jake this makes the table area scrollable but the headers also scroll. I dont want the headers to scroll – Tom Jul 17 '20 at 16:16
Hey Tom, after all the steps I listed above, then make the header container have position:fixed or position:sticky. One of those should work. Or research how to make an HTML element have a fixed position in a scrollable div – Jake Chambers Jul 19 '20 at 17:30

Fixed header getting hidden behind the navbar

1 Answers1