I also need help with my Off Canvas after upgrading to 6.0.0!

Wappler General Need Help
1

Like others, I am having issue with my off canvas after upgrading to 6.0.0. Seemed to be working fine using the beta, but today it stopped after the update. I saw the other posts and have checked the following;

  • Using Bootstrap 5 local, v5.3.2, and my js file is 5.3.2
  • Made sure the off canvas is out of the main content
  • Toggled between bootstrap 5 cdn and local - no change
  • Made sure all frameworks, extensions were up-to-date
  • Toggled beta channel on/off

It worked correctly earlier, no code changes other than the update.

So, like I said it just stopped displaying after the update. I have it on a layout page for left side navigation. It is supposed to default to visible on more than 992 pix, hidden on smaller.

I should not have to change any code if it was working on the beta right? What else do I need to look for?

image
image450Ă—530 40.9 KB

image
image712Ă—811 59.8 KB

Off canvas element:

<div class="offcanvas offcanvas-start bg-dark text-light" id="offcanvas1" is="dmx-bs5-offcanvas" tabindex="-1">

    <div class="offcanvas-body ps-1 pe-1">
      <div class="container-fluid">
        <div class="row">
          <div class="col ps-0 pe-0">

               
       </div>
        </div>
      </div>
   </div>
  </div>
2

The offcanvas element is not shown by default on page load. You either need to open it using a dynamic event or add a .show class to it in order to be visible on page load.

3

Thanks Teo, I have a css rule to toggle visibility on/off with the page size.

@media (min-width: 992px) {
  main {
    margin-left: var(--offcanvas-width);
  }

  .offcanvas {
    -webkit-transform: none;
    transform: none;
    visibility: visible !important;
    top: var(--topNavbarHeight);
    height: calc(100% - var(--topNavbarHeight) - var(--bottomNavbarHeight));
  }
  .offcanvas-backdrop::before {
    display: none;
  }
  .offcanvas-header .btn-close {
    visibility: hidden;
  }
}
@media (max-width: 981px) {
  .navbarheaderimage {
    visibility: hidden;
  }
  .maincontentmargin {
    margin-top: 95px;
  }
}
1 Like
4

I think I have found the issue. For anyone having issues with Off Canvas in Bootstrap 5.2.3 coming from Bootstrap 5.1, the visibility class has changed. Here is what I found:

Responsive offcanvas

Offcanvas component now has responsive variations. The original .offcanvas class remains unchanged—it hides content across all viewports. To make it responsive, change that .offcanvas class to any .offcanvas-{sm|md|lg|xl|xxl} class.

I changed the class on mine and it works now.
From this:

<div class="offcanvas offcanvas-start bg-dark text-light" id="offcanvas1" is="dmx-bs5-offcanvas" tabindex="-1">

To this:

<div class="offcanvas-lg offcanvas-start bg-dark text-light" id="offcanvas1" is="dmx-bs5-offcanvas" tabindex="-1">
1 Like