Utilizing the simplebar library (https://github.com/Grsmto/simplebar) within a project built on Angular 6 has presented an issue. Upon adding the simple bar to my HTML tag, both horizontal and vertical scroll bars appeared. My goal is to display only the vertical scroll bar.
Attempting to conceal the horizontal scroll bar, I utilized this CSS property:
overflow-x: hidden
As well as these properties:
width:100%" and "position:absolute" or "position:relative"
<div data-simplebar style="overflow-x: hidden">
<div *ngFor="let example of examples;">
<div>{{example.title}}</div>
<p>{{example.text}}</p>
</div>
</div>
Despite expecting only the horizontal scroll bar to show, it appears that my attempted solutions have not worked. It's unclear if there's something missing in the CSS or if Angular is contributing to this issue.