html - Bootstrap Offcanvas appears below card and only works once - Stack Overflow

admin管理员组

文章数量:1344334

I'm trying to add an offcanvas element inside a card using Bootstrap 5.0.2. However, the offcanvas element appears below the card instead of being contained within it. Additionally, the offcanvas only works once and doesn't toggle correctly. Can anyone help me identify the issue?

Expected behavior: The offcanvas element should appear within the card and toggle correctly.

Actual behavior: The offcanvas element appears below the card and only works once.

Bootstrap version: 5.0.2

$(function() {

  if (feather) {
    feather.replace({
      width: 14,
      height: 14
    });
  }

  var allowClose = false;

  $('#offcanvasCard').on('shown.bs.offcanvas', function() {
    $('.offcanvas-backdrop').show();
    allowClose = true;
  });

  $('#offcanvasCard').on('hide.bs.offcanvas', function(e) {
    console.log('Hiding offcanvas...');
    if (!allowClose) {
      e.preventDefault();
    } else {
      allowClose = false;
      $('#offcanvasCard').hide();
      console.log('Hiding backdrop...');
      $('.offcanvas-backdrop').hide();
    }
  });

  $('#offcanvasCard').on('hidden.bs.offcanvas', function() {
    $('.offcanvas-backdrop').hide();

    setTimeout(function() {
      $('button[data-bs-target="#offcanvasCard"]').blur();
    }, 100);
  });

});

.card {
  position: relative;
  overflow: visible;
}

.card-wrapper {
  position: relative;
  overflow: visible;
}

.offcanvas-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.offcanvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  visibility: hidden;
}

.offcanvas.show {
  visibility: visible;
}

<pre>
 <div class="card-container">
   <div class="card-wrapper">
     <div class="card position-relative">
       <div class="card-header">
         <h4 class="card-title">Visitors</h4>
         <p class="card-text text-muted font-small-2"></p>
       </div>
       
       <div class="card-body">
         <nav aria-label="breadcrumb">
           <ol class="breadcrumb">
             <li class="breadcrumb-item">
               <a href="#">Contacts</a>
             </li>
             <li class="breadcrumb-item active" aria-current="page">Visitors</li>
           </ol>
         </nav>
         
         <div class="offcanvas offcanvas-bottom position-absolute" data-animation="true" tabindex="-1" id="offcanvasCard" aria-labelledby="offcanvasCardLabel">
           <div class="offcanvas-header bg-secondary text-white">
             <h5 class="offcanvas-title" id="offcanvasCardLabel">Visitor Data</h5>
             
             <button type="button" class="btn-close text-warning" data-bs-dismiss="offcanvas" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           
           <div class="offcanvas-body">
             <!-- Offcanvas body content -->
             <p>Some text as placeholder.</p>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</pre>

本文标签： htmlBootstrap Offcanvas appears below card and only works onceStack Overflow