CODEWITHSUNDEEP
htmlcsstwitter-bootstrapscrollbar
Omar Tariq
Omar Tariq

Reputation: 7724

In Bootstrap 3.0 Modal, Scroll bar disabled but it still occupies space

This question is related to this:-

Why does a second vertical scroll bar appear in this Bootstrap 3.0 Modal demo?

Ok. I've override the .modal class overflow-y rule:-

.modal {
    overflow-y: auto !important;
}

But now when the modal opens I do not see scroll bar. That's fine. That is what I required. However, it still consumes the space, and the page moves towards the left whenever the modal opens.

screenshot:-

enter image description here

Any solution?

Upvotes: 3

Views: 2645

Answers (3)

Chanuka Asanka
Chanuka Asanka

Reputation: 3014

It's happening because of after open modal, modal is adding class "modal-open" to body tag.

to resolve this

You can override CSS as below

body.modal-open { overflow-y: auto; }

but still you will see another disable scroll bar at side. to resolve that

you can override as below

.modal{ overflow-y: auto; }

Upvotes: 0

Govan
Govan

Reputation: 7781

Instead of auto give hidden.

.modal {
    overflow-y: hidden;
}

It worked for me.

Upvotes: 0

Omar Tariq
Omar Tariq

Reputation: 7724

Culprit caught. Bootstrap adds a class to the body and other areas with the following name and rule:-

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
     margin-right:15px;
}

also override this class as follows, and it'll be fine.

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
     margin-right:0px;
}

Upvotes: 5

Related Questions