9

I want to disable overflow-y: hidden style for only one component. This style is in my style.scss like so

body {
overflow-y: hidden;
}

I tried this in my component but it did not work.

<div class="div1" style="overflow-y: visible !important;">
...
</div>
0

2 Answers 2

9

Can you try to put

.visibleClass{overflow-y: visible ;}

to style.css under body css attribute

in appcomponent.html add activate event to router-outlet

<router-outlet (activate)="showHideNav($event)"></router-outlet>

then in component.ts

 showHideNav(event){
    event instanceof YourComponent ? document.body.classList.add("visibleClass") :
                                     document.body.classList.remove("visibleClass")
  } 
1
  • 1
    You should not be using the !important tag on your first line of CSS. It's unnessecary here .
    – Martin
    Jun 3, 2020 at 14:14
2

It doesn't work because this div is inside of an invisible body and there's no way to tell body to display it without being displayed itself.

In you case without changing the architecture it's impossible.

You need to do something like the code below.

<body>
  <div class="new-body-root"> <!-- move all body styles here -->
    ... all the code
  </div>
  <div class="div1"> <!-- now it's always visible, hide it when you don't need it -->
    ...
  </div>
</body>
2
  • The body isn't invisble, it has an invisible overflow
    – mchl18
    Jun 3, 2020 at 13:37
  • did I write a different thing in the answer? He needs to change architecture that overflow-y: hidden and all other body logic would apply on class="new-body-root".
    – satanTime
    Jun 3, 2020 at 13:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.