CODEWITHSUNDEEP
angularangular-material
JPMous
JPMous

Reputation: 407

angular material : bad scrollbar position

In my project based on angular+material, I just succeeded to position vertical scrollbar below the toolbar (with the help of sidenav).

But it does not work as expected for all cases. See https://stackblitz.com/edit/angular-ivy-pst9kr

Page1 has one horizontal scrollbar with firefox !?! I expect to have one vertical scrollbar on the right and no horizontal scrollbar. I need to center images, tables and text.

I tried to play with "width" for horizontal scrollbar but no success.

Edit : Right ! In my project it was not working as expected so I was very puzzled, till I rewrote and did some cleanup.

  1. I surrounded each page with 2 div:
<div class="page-container">
<div class="page-content">
...
</div></div>
  1. I replaced "stdpage" with:
.page-container {
  position: fixed;
  top: 64px;
  overflow: auto;
  height: calc(100vh - 64px);
  width: 100%;
}

.page-content {
  padding-right:  3rem;
  padding-left:   3rem;
  padding-bottom: 1rem;
}

Upvotes: 0

Views: 704

Answers (1)

wahab memon
wahab memon

Reputation: 2416

By providing the width: 100% in your stdpage class work just fine. The Page 1 will get the vertical scrollbar properly after adding the width.

.stdpage {
  position: fixed;
  top: 64px;
  width: 100%;
  overflow: auto;
  height: calc(100vh - 64px);
}

Upvotes: 1

Related Questions