Problems with `Off Canvas` Not Fixed

Wappler General Bugs
23

This is the code that Wappler produces, and which fails to hide the Offcanvas widget.

<!doctype html>
<html>

<head>
  <base href="/">
  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <meta charset="UTF-8">
  <title>Untitled Document</title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/css/style.css" />
  <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js" defer></script>
</head>

<body is="dmx-app" id="main">
  <header class="">
    <div class="container">
      <div class="row">
        <div class="col">
          <nav class="navbar navbar-expand-lg  justify-content-end">
            <a class="navbar-brand me-auto" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavigation" aria-controls="offcanvas_collapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          </nav>
        </div>
      </div>
    </div>
  </header>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="offcanvas-start offcanvas-lg" id="offcanvasNavigation" is="dmx-bs5-offcanvas" tabindex="-1">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title">Menu</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"  aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            <nav class="navbar">
              <div class="navbar-nav">
                <a class="nav-item nav-link active" href="/">Home</a>
                <a class="nav-item nav-link" href="/about">About</a>
                <a class="nav-item nav-link" href="/contact">Contact</a>
              </div>
            </nav>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-9">
        <main>
          <div is="dmx-view" id="content">
            <%- await include(content, locals); %>
          </div>
        </main>
      </div>
    </div>
  </div>

  <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

When I add the target (as suggested by Bootstrap) to the Close button, all is well.

<!doctype html>
<html>

<head>
  <base href="/">
  <script src="/dmxAppConnect/dmxAppConnect.js"></script>
  <meta charset="UTF-8">
  <title>Untitled Document</title>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/css/style.css" />
  <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
  <script src="/dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js" defer></script>
</head>

<body is="dmx-app" id="main">
  <header class="">
    <div class="container">
      <div class="row">
        <div class="col">
          <nav class="navbar navbar-expand-lg  justify-content-end">
            <a class="navbar-brand me-auto" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavigation" aria-controls="offcanvas_collapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          </nav>
        </div>
      </div>
    </div>
  </header>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="offcanvas-start offcanvas-lg" id="offcanvasNavigation" is="dmx-bs5-offcanvas" tabindex="-1">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title">Menu</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasNavigation" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            <nav class="navbar">
              <div class="navbar-nav">
                <a class="nav-item nav-link active" href="/">Home</a>
                <a class="nav-item nav-link" href="/about">About</a>
                <a class="nav-item nav-link" href="/contact">Contact</a>
              </div>
            </nav>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-9">
        <main>
          <div is="dmx-view" id="content">
            <%- await include(content, locals); %>
          </div>
        </main>
      </div>
    </div>
  </div>

  <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

All boiled down, I do not care two hoots whether Wappler creates the correct code or not. My workaround works as you can see from this video.

Offcanvas - Side Navigation

It just does not look very appetizing in a video tutorial.

24

Ben, that is exactly what i explained in my post.

Screen Recording 2024-02-10 at 11.04.21

25

Sorry, I should have mentioned that you are right, the close button works when the Offcanvas is set as

<div class="offcanvas-start offcanvas" id="offcanvasNavigation" is="dmx-bs5-offcanvas" tabindex="-1">

But my example shows

<div class="offcanvas-start offcanvas-lg" id="offcanvasNavigation" is="dmx-bs5-offcanvas" tabindex="-1">

The difference is offcanvas-lg instead of just offcanvas

26

It works perfectly fine with offcanvas-lg. Please check my post again and the video i just posted.
I think you are missing the part where you click the offcanvas close button in the offcanvas header and select which offvanvas it controls.

1 Like
27

@Teodor, I am eating humble pie :blush:. I re-installed Wappler and all is well.

Words fail me when I try to thank you, especially for your time spent.

Ben

2 Likes