Search code examples
htmlcsstwitter-bootstrapbootstrap-4bootstrap-modal

Popover in modal body covered by modal footer

I have a Bootstrap 4 modal with a couple of buttons, one of them is supposed to toggle a custom popover div, which is centered below the button that triggers it. The popover styles work fine when they're not in a modal, but something about the modal is causing the popover to be partially hidden.

I've tried several variations of overflow: and z-index: styles and can't seem to figure this out.

How can I get the popover to be fully visible in it's current position relative to the "Button 1" button?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="modal" tabindex="-1" data-backdrop="static" data-keyboard="false" data-show="false" data-focus="true" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
    
      <!-- Modal Header -->    
      <div class="modal-header" style="margin-bottom: 0px; padding: 0.5rem 1rem; border-bottom: 0px; background-color: rgb(248, 249, 252);">
        <h5 class="modal-title text-center">
          Title Here
        </h5>
        <button type="button" class="close"><span aria-hidden="true">&#215;</span></button>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body" style="padding: 0px; max-height: 80vh; overflow: auto;">
        <div class="card card-body" style="padding: 0.5em; border: 0px; margin: 0px; overflow: hidden;">
          <div style="margin: 0.5em; padding: 0px;">
            Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
          </div>
          <hr style="margin-bottom: 3px; margin-top: 3px;" />
          
          <!-- Modal Buttons --> 
          <div class="row">
            <div class="col-6 text-center">
              <button class="btn btn-sm text-muted user-comm-react-btn">Button 1</button>
              
              <!-- Button 1 Popover Div --> 
              <div class="text-center bg-light shadow" style="position: absolute; width: fit-content; margin: 0px auto; border-radius: 2em; left: 50%; transform: translateX(-50%); z-index: 999; white-space: nowrap; border: 1px solid rgb(227, 230, 240);">
                Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
              </div>
              
            </div>
            <div class="col-6 text-center">
              <button class="btn btn-sm text-muted">Button 2</button>
            </div>
          </div>
          
          <hr style="margin-bottom: 3px; margin-top: 3px;" />
        </div>
      </div>
      
      <!-- Modal Footer -->
      <div class="modal-footer" style="padding: 0.25em; border-top: medium;z-index: 4;">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
      </div>
      
    </div>
  </div>
</div>

Solution

  • I had overflow:hidden on the .card-body. Removing that was the solution.