CODEWITHSUNDEEP
htmlcssangulartypescriptangular6
Juan
Juan

Reputation: 53

Hiding horizontal scrolling bar doesn´t work using simplebar library

I'm using simplebar library (https://github.com/Grsmto/simplebar) inside of an angular 6 project, when I added the simple bar in my html tag, it showed up an horizontal and a vertical scroll bar, so I want to show the vertical scroll bar only.

I've tried to hide the horizontal scroll bar with this CSS property: 

overflow-x: hidden

and with this properties too: 

width:100%" and "position:abolute" 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>

I expect only to show the horizontal scroll bar, but it doesn't seem to work, I don't know if I'm missing something or some CSS property, or if Angular is causing this problem.

Upvotes: 5

Views: 8285

Answers (4)

Igor Manoel
Igor Manoel

Reputation: 1493

If you are using SimpleBar from simplebar-react, you can set the overflow in the style, as in the example below.

<SimpleBar style={{overflowX: 'hidden' }} autoHide={true}>
   ...
</SimpleBar>

Upvotes: 1

mkbctrl
mkbctrl

Reputation: 113

Old question, but I think there are still no good answer to it. When I am in need of hiding the horizontal scrollbar that's what I do:

.simplebar-scrollbar::before {
  background-color: transparent;
}

Upvotes: 0

Ismail Vittal
Ismail Vittal

Reputation: 1103

The SimpleBar library creates wrapper around your contents, hence the CSS overflow applied on your div will not hide the scrollbars.

Hide the horizontal scroll bar created by the plugin

.simplebar-track.simplebar-horizontal {
   display: none;
}

and disable the scroll on scrollable div created by the library.

.simplebar-content {
  overflow-x: hidden;
}

Upvotes: 3

Michael
Michael

Reputation: 1

try using both of these commands at once.

  • overflow-y: scroll;
  • overflow-x: hidden;

Upvotes: 0

Related Questions