Wappler 6.0 off canvas not working

Wappler General How To
#1

I upgraded to wappler 6 and something must have gone wrong because my offcanvas stopped working on all my sites. The modal works but not off canvas. I am using the wappler 6.0 for M1 Mac. I erased the app from my Mac and then reinstalled but still the same issue. the link below is to a page that has just two buttons - one opens a modal (showing that modals work) and the other button demonstrates what happens with offCanvas. Any ideas would be very appreciated.

https://crownpointe.info/practice.php

#2

Hey!
You’re using 5.3.2 on bootstrap.bundle.min.js but not on bootstrap.min.css. Maybe updating bootstrap.min.css?

image
image1019×184 16.9 KB

Check the publish button image

Also, the location is correct?
image

Here is mine:
image

I don’t know if that can help!

PS: Also your /style.css is not pointing to the css file (https://crownpointe.info/css/style.css)

1 Like
#3
  1. make sure that the Beta channel has been activated (restart Wappler after activation)
  2. keep the Modal and the Off-canvas outside of the main content

image
image2560×1438 300 KB

#4

Just noticed the action for the Off-canvas which reads

<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button

This should read as

<button id="btn2" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1">Off-canvas</button>
#5

I appreciate all the help from both Ben and Franse - but I think I fouled up my Wappler. I have been using modal and off canvas since they became available and you both have pointed out some good things but my overall Wappler just doesn’t seem to be responding. Ben, I think the buttons you were referring to were in the modal header section not the buttons I put on the page. I am on a Mac with M1 program downloaded and when I do simple things like create a query, the screen goes black and then I have to quit the program so I’m wondering if my Wappler program overall is just screwed up – here’s a quick video of what is happening - wappler 6problem - I think my upgrade got corrupted or something. - YouTube

#6

Hey @youngjl217,

Similar problem in that thread, check that suggestion:

#7

You are using an old Bootstrap version for the bootstrap css and a new one for the bootstrap js. Just run the project update as explained here: How to Reset Your Project Default Frameworks so it will update all the files.

2 Likes