NodeJS: Elements not accessable on Main layout via UI

Wappler General Need Help
1

Hey guys,

Just started a nodeJS project and I have a question…
I work on wappler 6.1.2 stable

On my main layout page I cannot access elements that exist there, like Collapses and OffCanvas

image
image1914×1051 234 KB

Of course, if I type by hand a code like dmx-on:click="offcanvasNavigation.hide()", it works fine…

*In php I could access them:

image
image977×687 22.6 KB

I’m doing something wrong or what?

Any help would be appreciated!

2

Does this help?

image
image2122×1177 258 KB

3

Hey brother!

I’m talking about the UI and accessing the elements, a collapse for example…
I have no access on them as you can see of my screenshot above, they are not listed there!

image
image289×788 42.4 KB

(whatever you do, it helps!! even if you just smile!!)

1 Like
4

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()">

5

Please update to the latest 6.5.4 and check then if the problem still persist.