Offcanvas contents hidden when displayed

Wappler General Bugs
1

Wappler Version : 6.0.0-beta.12 & 5.8.2
Operating System : Mac Sonoma 14.0
Server Model: Docker/Node.js
Database Type: PostgreSQL
Hosting Type: Docker (local)

Expected behavior

When an offcanvas item is displayed, the elements within the canvas should be visible.
This worked previously, before updating to 5.8.2 or using the 6 beta

Actual behavior

When the offcanvas section is displayed, no elements contained within the canvas are visible as they all still have the CSS .offcanvas visibility set to hidden

How to reproduce

  1. Add an offcanvas element to a page.
  2. Set a method to show the offcanvas element, e.g. a button.
  3. Save the page and view in the browser.
  4. Show the off canvas element (e.g. by clicking your button).

The off canvas container is shown and the page darkens as expected but none of the elements added to the off canvas container are visible.
A quick loomk at the developer tools and the elements all have the following:

.offcanvas {
visibility: hidden;
}

CleanShot 2023-10-11 at 13.22.59
CleanShot 2023-10-11 at 13.22.59734×144 37.1 KB

If I remove that within the browser developer tools, the elements appear.

I assume the .offcanvas class is not being removed or updated when the canvas is shown (I don’t know what it did before).

2

Can you post your offCanvas code here? I have a project I just created with the beta and it uses a lot of offCanvas panels with no issue at all. Better yet, a live link?

What type of content do you have in the panel?

3

There is a problem with some bootstrap versions…make sure you have the latest, or add details on your bootstrap version so the team can weigh in:

4

Hi Brad/Ken,

Very basic test page code:

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" is="dmx-app" id="testing" appConnect="local" components="{dmxBootstrap5Offcanvas:{}}" bootstrap5="darkly" -->
<meta name="ac:route" content="/testing">
<div class="offcanvas offcanvas-end" id="offcanvas1" is="dmx-bs5-offcanvas" tabindex="-1">
    <div class="offcanvas-header">hello world
        <h5 class="offcanvas-title">Offcanvas title</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>Offcanvas body text goes here.</p>
    </div>
</div>
<div class="container">

    <h1>Fancy display heading</h1><button id="btn1" class="btn" dmx-on:click="offcanvas1.show()">Button</button>
</div>

I have noticed I have -
Bootstrap v5.1.3 bootstrap.min.css
Bootstrap v5.3.0 bootsrap.bundle.min.js

Both with
App Connect Bootstrap 5 Offcanvas Version: 2.0.0-beta.1

I have checked for updates on project frameworks and it keeps suggesting bootstrap.min.css which I accept but I don’t think it is updating it as if I check again, it says it wants to update it :frowning: perhaps that is why there is a difference in the versions?
Is there a way for me to manually copy the css file if needed?

5

OK, time for an update.

Been away for a week so thought I would circle back round to this.

No matter what I do with Wappler 5.x.x version, the bootstrap.min css and js versions do not update.

Every restart of Wappler, I get the message that “bootsrap.min.css needs updating”, I let it and see that the file has copied in the output/terminal but the version never updates.

So downloaded latest beta 6 (14), that also said it wanted to update both bootstrap js and css (and other stuff), let it and now it all works fine with both file versions at 5.3.2

The offcanvas displays correctly and it alls seems more responsive (probably just me). The Beta fixes what v5 couldn’t, just in case anyone else gets something similar.

Time for more coffee.