Flex container does not hide via dynamic attribute

[Hyperbytes]

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?

[Teodor]

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.

[Hyperbytes]

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

[Teodor]

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.

[Hyperbytes]

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

[Marzio]

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

[Teodor]

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

@Teodor

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.

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

[Marzio]

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

[Teodor]

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" 

[Marzio]

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

[Teodor]

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

[Marzio]

I tried but still doesn’t hide

[Teodor]

Please copy the expressions exactly as i provide them here.

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

[Marzio]

I had noticed it too Sorry
Now works
Thank you

[Marzio]

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

[Marzio]

[Teodor]

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

How to update a NULL

Is there a default value set on that column in the database. The zero date is a special date from mysql and is not a valid date string. You can disable zero dates in mysql https://dev.mysql.com/doc/refman/5.7/en/sql-mode.html#sqlmode_no_zero_date. Also the expression for default null should be {{$_POST.data_modified.default(null)}}. A null value, not a string.

[Marzio]

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