Issues with Bootstrap 5.2 modal

HTML-CSS
1

I’m having an issue with the modals on my site. When you click on the button that says more information the navbar shifts over then back and when you close the modal it does the same thing. I can’t for the life of me figure out why or what css code I need to add to get it to stop doing that. It only does it when viewing on desktop (not sure about tablets).

My site is https://anita-potter.com you can view the page source and click on the custom.css link to see that. Modals are in the Portfolio and Musician Portfolio sections. There are a few more bugs I need to work out but this is the main one.

Thanks in advance :slight_smile:

2

Bootstrap is hiding the scrollbar when the modal is open and then adds 17px padding-right on the body to compensate for the missing scrollbar. If you have fixed-top on the nav it adds another 17px to the nav as well which just seems like a bug.

  1. Keep it fixed-top and remove the padding.
.modal-open .fixed-top {
  padding-right: 0 !important;
}
  1. Use sticky-top instead of fixed-top on the nav. But there still seems to be a bug in the code. Because as far as I can tell it is supposed to add a negative margin-right if the nav is position sticky but it doesn’t do that.

Add the margin

.modal-open {
  margin-right: -17px;
}

Or removing the padding.

.modal-open {
  padding-right: 0 !important;
}

Both should do the same as long you are using sticky-top.

  1. Another option is just to keep the overflow and not hide the scrollbar. You will however be able to scroll the body with the modal open. If you have the nav set to fixed-top you still need the CSS from #1 
.modal-open {
  padding-right: 0 !important;
  overflow: auto !important;
}

I don’t think the .modal-open class is used anywhere else than on the body (if you want you can scope/namespace the selector body.modal-open).

There seem to have been a few different PRs for it. But I’m still seeing this bug so I’m not sure what is up with that.

https://github.com/twbs/bootstrap/issues/22792

https://github.com/twbs/bootstrap/issues?q=is%3Aissue+nav+fixed+modal+is%3Aclosed

https://github.com/twbs/bootstrap/blob/main/js/src/util/scrollbar.js#L37

3

Thank you! I ended up with changing from fixed-top to sticky top and this code

.modal-open {
  padding-right: -17px;
}

Course now I need to adjust the padding top because sticky top moved my box down the page. I’ll continue to work on that offline and get that right before updating the live site.

Thanks again I really appreciate it :slight_smile:

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.