Flex container does not hide via dynamic attribute

I have a page in which I have a number of forms which show/hide on button click which toggles a variable tied to the show event of the element (mainly to show insert form below table). Setting dynamic show/hide events for forms and containers works perfectly however when applied to a flex container the container will not hide.

Here is a quick mini example
http://dev.findmystudentdigs.co.uk/toggleflex.html

Is this a bug or a bootstrap limitation?

It is because bootstrap 4 adds the following styles to the flex containers:

.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}

The !important makes it override the display:none applied to it.

Thanks @Teodor, i shall keep it simple then and just avoid flex containers for this application

Or you could just apply some other class to it, overriding the .d-flex class. Just use dynamic attributes - class instead of show/hide and apply your own custom class to it.

Thanks, I shall have a play and see what i can do

Hi Hyperbytes
I have now this problem
If you solved it, can you tell me how you did it?
Thank you
Good day

Hello @Marzio
I already explained where the problem comes from:

Better use dmx-class:d-none="condition_here" to hide the container, instead of the dynamic show/hide attributes.

Thanks Teodor, but unfortunately it doesn’t work
Maybe I’m wrong?

Seems the d-flex class overrides d-none as well.

You can try:

dmx-class:d-flex="condition != 0" dmx-class:d-none="condition == 0" 

No it doesn’t work
I have to find another solution to list the characteristics of a product and have the possibility of not displaying those not present
Too bad because Flex Container / Display Block was perfect

Marzio, i already tested this locally.
What do you mean it doesn’t work?

I tried but still doesn’t hide

Please copy the expressions exactly as i provide them here.

! = is wrong. It must be != no space between the two symbols.

I had noticed it too Sorry
Now works
Thank you

1 Like

Hi Teodor
sorry if I reopen this conversation, but I still have a small problem to solve, and I think it may be of interest to friends in the community
I have in the database some date fields that often are not insert in the Back End.
In a database the result is 0000-00-00, and in the Display Block page are displayed 01-01-1900
I would like to not display these dates (when 0000-00-00), but I have tried several times and cannot get this result
Schermata 2020-02-21 alle 11.26.51

Schermata 2020-02-21 alle 11.30.48

Please check Patricks reply here, regarding date values 00-00-0000:

Perfect I solved it by adding (being inserted or updated) -> .default(null)
Thank You

1 Like