How to toggle Flex Container visibility

I made this procedure twice yesterday, it didn’t work for me. I tried to make it for a flex container in order to make an offcanvas section. Does it work only for some specific type of objects like paragraphs or other stuff that has content inside ?

Hello,
It’s the same for any element on the page.
Please provide a link to your page where i can check what’s wrong on your page.

1 Like

Hello, well, it is hard to name it page yet :smiley:
anyway: http://deals4u.pl this is my sandbox for trying with Wappler.

the hamburger button should toggle a flexbox container with the list on the left side of the page.

I see the issue there, the d-flex bootstrap 4 class uses display: flex !important; which overwrites the inline style: style="display:none;" which the condition adds.

The solution here is to change this a bit and use the dynamic style attribute instead of the dmx-show. So just change the dmx-show to:

 dmx-style:display.important="toggler.value  == 0  ? 'none' : ''"

This will overwrite the d-flex rule, added by default in the Bootstrap 4 css.

1 Like

It works :slight_smile: Thank you very much Teodor.
I have a lot to learn. Anyway, you land in the code :smiley:

You can add it using the UI, it was just easier for me to provide the exact code you need:

Screenshot_14

1 Like

First you have to know what string to add. But its a good luck that there are helpful people like you onboard, thank you again Teodor.

That’s the idea of our community :slight_smile:
Do not hesitate to ask any question you have in future.

1 Like