Bootstrap-vue: Scroll body of modal with fixed header?

[DavidRueter]

Is it possible to do something like this with a long modal, where the header remains fixed while the body of the modal scrolls? See: https://github.com/keaukraine/bootstrap4-fs-modal

[tmorehouse]

You can use some custom CSS to target .modal-body to restrict the height and set overflow-y: scroll

.my-modal .modal-body {
  max-height: 80vh; /* max 80% of the viewport height */
  overflow-y: auto;
}

and then set my-modal class on b-modal:

<b-modal class="my-modal" title="Foobar">
   Scrollable body with long content
</b-modal>

[DavidRueter]

Thanks! Works great! And thanks a lot for bootstrap-vue in general. Excellent work, and very useful.

[tmorehouse]

You may need to adjust the max-height depending on the heights of your modal header and footer, but 80vh is useful in most situations. You may need to test it out on small screen devices (like phones/tablets)