Bootstarp 5 - Fullscreen modal relative to parent

Question

BootStrap 5

I'm using this layout:

<div class="row flex-nowrap">
  <div class="left">
     <!-- leftbar -->
  </div>

  <div class="main overflow-auto position-relative">
    <!-- main site content -->

     <div class="modal fade">
        <div class="modal-dialog modal-fullscreen">
          ...
        </div>
     </div>
  </div>
</div>

The main is the main content area ( scrollable ).

I'm trying to use a full-screen modal inside main, but instead of it being relative to the viewport it should be relative to it's immediate parent (i.e main).

.modal uses position:fixed which won't let this happen. So I did this:

 <div class="modal fade position-absolute">
    <div class="modal-dialog modal-fullscreen">
       ...
     </div>
 </div>

But to no avail. It made it look messy. Is there a cleaner way to achieve what I'm trying to achieve.

Cedric Cholley · Accepted Answer · 2021-09-18T14:49:01.710

I don't really think the following code will be cleaner than your solution but just in case here it is.

The idea it to create a stacking context, this way Position: fixed will not be relative to the viewport. A few properties create a stacking context (transform, … and probably some more).

In other words transform: translateX(0) on your div.main element will make your div.modal behave like it has a position: absolute.

EDIT: For more information about properties creating stacking context : Which CSS properties create a stacking context?

Bootstarp 5 - Fullscreen modal relative to parent

1 Answers1