Twitter Bootstrap Question posted in

Force Twitter Bootstrap 3 modal to not hide vertical scrollbar

Vertical scrollbar is being hidden, when Twitter Bootstrap 3 modal appears, and returns, when modal is hidden. Since certain elements on my page varies its position on whether vertical scrollbar is or isn’t visible — this produces an overall not to good looking effect:

enter image description here

Is there any way to prevent this and force vertical scrollbar to stay on screen all the time, even during displaying of Twitter Bootstrap 3 modal?

I’m using modals generated by Yii2 framework, but I doubt, that this is framework issue. Seems to be more like core Twitter Bootstrap 3 problem.

Tags:

2

Answers


  1. 0

    In your custom CSS file that should be loaded after the bootstrap CSS add the following code:

    .modal-open {
    overflow: scroll;
}
    Login or Signup to reply.
  2. 0

    As you stated, the Bootstrap default code has certain preset CSS, which in this case will do overflow: hidden on the appearance of the modal.

    To fix this issue, target the modal using a selector and add overflow: scroll to it, and make sure it comes after the Bootstrap CSS to get priority.

    You could also slap an !important tag on it in the case that your CSS needs to come before the Bootstrap CSS for whatever reason.

    Hope that helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search