I have already gone through this question but couldn't find a solution.
I used JavaScript to apply the style to the element with the id "left-container" instead of using a class, and now I'm unable to override it!
You can view the demo for a minimal reproducible example.
hideLeftContainer():void{
console.log('hide')
let element = document.getElementById('left-container')
element.style.display = 'none'
}
This is the style that I want to apply without using a media query:
#left-container{
display: block;
position: static;
max-width: 150px;
min-width: 150px;
flex-basis: 150px;
background-color: white;
}
I've also attempted to override the style using the class selector but haven't had any success.
How can I resolve this issue? Thank you!
HTML
<button class="icon-button" (click)="showLeftContainer()">
<fa-icon class="menu-icon" [icon]="faBars"></fa-icon>
</button>
...
Code truncated for brevity
...
</div>