mat-sidenav scrollbar visibility during animation

Question

I am working with the mat-sidenav and have managed to setup a very basic one that will sit on the left side and open and close just enough to show the mat-icons. This part is fine and working as expected. I have included the slide animation via css for open and close. Now the problem is the visibility of the scrollbar during the animation. I understand why the scroll exists as this is because I am using an ngif to hide content after the mat-icon so when it is in partial closed state the letters/description of the icon does not peek on the end...this is then inserted as the animation takes place through a toggle functionality - I am perfectly fine with the scrollbar existing here. My problem is with making the scrollbar invisible yet still there; the reason is that the menu could also grow vertically depending on permissions and I would like the user to be able to scroll even though they can not see the scrollbar. Now this is not a new problem as I have seen after researching - however I do not understand how to apply what I have read in the below link to my problem. This along with something I have observed with css attribute overriding which I assume is because I am not using css scoping properly; makes up my issue.

Here is the link to the popular solution: Hide scroll bar, but while still being able to scroll

Inspecting the element I find the mat-drawer-inner-container is what has the overflow property and I find that any of the properties I set via css does not take. Below is a very stripped version of the html for debugging and is what I am working with to try and get this to work:

<mat-sidenav-container fullscreen>
   <mat-sidenav #sidenav mode="side" class="navbarComponent" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true">

   <mat-nav-list>

      <div id="menu" class="custom-selector">
        <mat-list-item (click)="toggle()">
         <mat-icon mat-list-icon class="noselect">menu</mat-icon>
         </mat-list-item>

         <div *ngIf="sidenavWidth > 6" class="sidenav-item noselect" style="background-color:#d56a00; padding:20px 30px 20px 10px; line-height:0px; text-align:left;">
          <table width="100%">
            <tr>
              <td><img src="assets/images/avatar.png" width="100" height="100"></td>
              <td id="avatar-table" style="color:#fff; vertical-align:top; padding:10px; line-height:15px;" class="col text-truncate"><p><b>Some name</b><br/>
                   Some other text</p>
            </tr>
          </table>
        </div>

         Will use ngfor to generate all the menus. This one is just one and the Html is just a menu with hardcoded values
        <app-menu-list-item [sidenavWidth]="sidenavWidth" [subMenuEnabled]="subMenuEnabled"></app-menu-list-item>

      </div>




     </mat-nav-list>

   </mat-sidenav>


</mat-sidenav-container>

And here is the css I have tried. Have used basically exactly what was in the link for the solution but as I understand it you need to wrap the element which is responsible for the scroll in another element and make that one with overflow hidden and position relative. I have attempted this wrapping using mat-sidenav as the parent/wrapper and .mat-drawer-inner-container as the child/inner element:

html, body {
    height: 99%;
    border: 1px solid red;
    overflow:hidden;
}

mat-sidenav {
    height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}

.mat-drawer-inner-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: -15px;
    border: 1px solid blue;
    overflow: auto;
}

Now for the last part...let's assume I got the above correct. The css does not take. Is this because of css scoping? The .mat-drawer-inner-container stays the same - this is what I see after I inspect element:

.mat-drawer-inner-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

If I change the overflow element in the browser to lets say hidden just to see if it takes - it does remove the scrollbar(not what I want but a good way to test)...which should mean the way I am applying my css attributes is incorrect.

Yes I am quite new to frontend. Eager to learn though it needs to be as I work on the project.

Any advice?

EDIT: The requested screenshot. The inspected element

The css:

.mat-drawer-inner-container {
    overflow-x: hidden !important;
}

all i can think of is using `width: 0px;` on `::-webkit-scrollbar` but according to w3schools, : `Custom scrollbars are not supported in Firefox or IE/Edge.` — Ramon de Vries, Jan 04 '19 at 08:21
tested that on chrome. Still a no go. There must be something I am missing — Nilo, Jan 04 '19 at 09:22
Could you maybe explain to me why this works? If I understand the concept behind it - perhaps it will lead me to my answer: http://jsfiddle.net/5GCsJ/954/ — Nilo, Jan 04 '19 at 09:24
Not displaying a scrollbar in a scrollable container is bad UX. — Baruch, Jan 04 '19 at 09:29
Ok that makes sense...the vertical scroll as invisible was just a thought however the horizontal scroll that only appears due to the inserting of an element when ngIf is satisfied is a genuine problem and should be removed. So even if we ignore removing the vertical scroll. The horizontal one should be removed as it causes a flash during the slide animation. This changes the question from y and x axis to just x axis. I do not think eliminating the horizontal scroll is bad UX as this part of the UX exists in two states and everything inbetween is a transition — Nilo, Jan 04 '19 at 09:34
so maybe the approach should move from hiding to having overflow-x: hidden? — Nilo, Jan 04 '19 at 09:37
@Nilo in the fiddle you send, the outer div, `container1` is given a width, inside is the scrollable div `container2` wich has `100% width`, so it fills the container, but also has `padding right` meaning it will push the scrollbar out of the container, but since `container1` has overflow hidden. you wont be able to see that u pushed it to the right — Ramon de Vries, Jan 04 '19 at 09:39
have tested via browser and having overflow-x: hidden; does solve this animation problem however I do not know how to override this from my css. I am guessing it is a css scoping issue where the values I see are being set from a mre specific css targeting than mine — Nilo, Jan 04 '19 at 09:40
@RamondeVries ooo thats pretty neat...so if I had to take Baruch advise to keep the vertical scroll but solve the animation issue - one way would be to adapt the mentioned approach to only hide the x axis overflow. Though in my case the simple solution would be to just have overflow-x: hidden; on the .mat-drawer-inner-container...but I can not seem to get it to persist — Nilo, Jan 04 '19 at 09:43
can u post a screenshot or fiddle why `overflow-x:hidden` isn't working?, like code wise or chrome inspect mode on the element — Ramon de Vries, Jan 04 '19 at 09:47
Have tried !important. Still seems that overflow: auto; is maintained. Perhaps something specific in angular is happening here. As from what i read online !important is the way to go — Nilo, Jan 04 '19 at 09:47
i think so, this is normally only for short anwsers/ questions — Ramon de Vries, Jan 04 '19 at 09:53
can u join this room? https://chat.stackoverflow.com/rooms/186181/nilo — Ramon de Vries, Jan 04 '19 at 10:04
I can join but may not chat as rep check is still there looking for 20 rep. Seems what I will have to do is just search the net and play around for a bit. Thank you Ramon for your assistance thus far. I I find a solution soon I will post an update. — Nilo, Jan 04 '19 at 10:08

score 1 · Answer 1 · edited Sep 21 '21 at 15:49

1

your CSS is ok just add it in style.css file

even try:

 *{ overflow: hidden !important; }

in style.scss

edited Sep 21 '21 at 15:49

atiquratik

1,296
3
27
34

answered Sep 20 '21 at 08:51

Rojin Gharooni

39
4

score 1 · Answer 2 · answered Oct 19 '21 at 07:36

1

if someone having same problem this is worked for me very well

::ng-deep .mat-drawer-inner-container {
     overflow: visible!important;
}

answered Oct 19 '21 at 07:36

Anass Allabou

11
2

how to this without ::ng-deep? – pinarella Mar 29 '22 at 12:44

score 0 · Answer 3 · answered Mar 29 '22 at 13:31

0

add this to your style.scss where you wont use ::ng-deep which is deprecated.

// Remove scrollbar from mat-sidenav inner container
.mat-drawer-inner-container {
  overflow: hidden !important;
}

answered Mar 29 '22 at 13:31

pinarella

805
8
16

mat-sidenav scrollbar visibility during animation

3 Answers3