0

Because of diferent sizes of scrollbar I'm getting a problem while using a fixed component in both mobile and desktop:

While the desktop version get correctly aligned with the components below, the mobile version doesn't. If I fix the width for the mobile the desktop will go over the component limit and it just doesn't work.

My css for it is as follow, the commented width is the one that works for the mobile. Anyone have any ideas?

.fixed-header {
  position: fixed;
  top: 56px;
  left: 14px;
  width: calc(100vw - 45px); //calc(100vw - 30px);
  z-index: 2;

  @include md {
    position: relative;
  }
}
Awybin
  • 67
  • 8

2 Answers2

0

Maybe make an adaptive layout through a media query?

    @media screen and (min-width: 600px) {
  .hereIsMyClass {
    width: 30%;
    float: right;
  }
}

This is an example. I think then the screen will be fine. I hope I understood the question correctly.

Ann Soboleva
  • 11
  • 1
  • I tried but it doesn't work when I resize the browser window on a desktop to a smaller width... – Awybin Feb 07 '22 at 12:15
0

I managed to do it by testing the scroll width in the ngOnInit as suggested in this answer (I edited a little for convenience), to test if it was mobile or not:

testIsMobile() {
    var scrollbox = document.createElement('div');
    scrollbox.style.overflow = 'scroll';
    document.body.appendChild(scrollbox);

    var scrollWidth = scrollbox.offsetWidth - scrollbox.clientWidth;

    document.body.removeChild(scrollbox);

    this.isMobile = scrollWidth == 0
}

Then I added the correct class through [ngClass]="fixedHeaderClass"

if (this.isMobile)
  this.fixedHeaderClass = "fixed-header-mobile";
else
  this.fixedHeaderClass = "fixed-header";
Awybin
  • 67
  • 8