Hey here is my findings related to the above mentioned issues I had…
1) offCanvas
I had it with just .offcanvas-lg and .offcanvas-start classes and was working fine…
<div class="offcanvas-lg offcanvas-start" id="offcanvasNavigation" is="dmx-bs5-offcanvas" tabindex="-1">
But this way the offcanvas was not listed in the binding panel.
When I added .offcanvas it was listed BUT it broke the offcanvas functionality
(when on lg view no sidebar at all):
<div class="offcanvas offcanvas-lg offcanvas-start" id="offcanvasNavigation" is="dmx-bs5-offcanvas" tabindex="-1">
So, after a few tests, when I added the following css rules"
- the offCanvas is listed in the bindings panel
- works fine (as it should)
(the media is for a offcanvas-lg, in other case it should be assigned accordinglly)
@media only screen and (min-width: 992px) {
.offcanvas{
position: relative !important;
visibility: visible !important;
width: 100% !important;
margin-left: 100% !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
it appears a little weird and deformed on wappler’s design view when it is selected but it works perfect.
This offCanvas issue seems to be related with this Baub’s post:
2) Dynamic Collapse
What I had:
<div class="collapse bg-secondary-subtle rounded-2" id="products-collapse" dmx-on:click="offcanvasNavigation.hide()">
Although it was working perfect, the is="dmx-bs5-collapse" was missing from the definition and this caused it to not be listed in the bindings panel…
<div class="collapse bg-secondary-subtle rounded-2" id="products-collapse" is="dmx-bs5-collapse" dmx-on:click="offcanvasNavigation.hide()">