Conflict between show/hide conditions and classes

I have a table with buttons to select items (to add/remove record ids to/from a cookie). A message indicates the number of selected items; for this, I have two paragraphs with show/hide conditions*. I’ve used this approach before without any problems, but couldn’t get it to work today. These two paragraphs were shown regardless of any items being selected:

<p class="d-sm-block" dmx-show="">records selected: {{}}</p>
<p class="d-sm-block" dmx-hide="">no records selected</p>

It turned out the classes were causing the problem. When I removed these, the show/hide conditions worked as expected. It seems classes and conditions conflict. I realise there could be cases where they might conflict, but not in this case.

*On a related matter: I haven’t found a way to indicate ‘records selected: 0’, unless the cookie is removed. So whether a cookie contains a single value or no values, the wordCount still returns ‘1’. Is there a reason for this? Is there any other way of determining if a cookie has a value or not?

Hi Tom,

The d-size*-block rule overrides the rest of the styles, that's why your show/hide dynamic attributes are not doing what you expect.

What your dmx-show/hide value should do exactly? What are you trying to check as I don't understand from your explanation...

It makes sense that the css rule should override the show/hide condition - but that doesn’t seem to be what’s happening.

I have a table with buttons which when clicked toggle adding/removing IDs to/from cookies. I want to display the number of selected items:


This all works fine. If no items are selected, I want to show ‘no records selected’. It’s something I’ve done quite a few times without any problem. However today, both paragraphs were displaying:


… for no obvious reason. The conditions were correctly set. Eventually I removed the class which was applied to the paragraphs - class="d-sm-block" - so this information only appears on ‘sm’ displays and up. This fixed the problem. Only one message is displayed (the show/hide conditions work correctly) and the message disappears below ‘sm’.

Sorry, but I am lost. What is showing and what do you expect to show?
Not sure if both issues are related, are they?
What/how do you add to the cookie value? What/how do you use it exactly then?

There are two messages - only one of which should show (depending on whether or not records are selected). The conditions are based on the number of IDs in a cookie. Obviously I don’t want this:


Everything works exacty as it should - now I’ve removed the class (and applied it to a new div). I don’t think the class should conflict with the show/hide conditions. It’s not a big issue and I’ve fixed it for my purposes.

I still don’t understand how are the cookie issue and class issue related, really… if these are two separate issues please post two separate topics! Sometimes it’s really hard to follow your explanations.

What do you expect to get from:

That you are using in your conditions? How do you add/remove values in your cookie? And what is the expected result/value?

The issue was the show/hide attributes conflicting with classes - or certainly seeming to. The mention of cookies was to do with the context when I came across the problem. Cookies were only related as far conditional display. I probably shouldn’t have added that, but it was only a footnote.

Here is an example which will hopefully explain the issue (or will explain what I’m misunderstanding).


As i explained the bootstrap display-size-* are overriding the default styles as in bootstrap css they are defined with !important like:

.d-md-block {
    display: block!important;

And what the dmx-show/hide does is to set an inline style of display:none/block so it gets overridden by the !important

Thanks Ben. I hadn’t though of adding styles like this to solve tihe problem. This produces slightly strange results (see updated link above), but could be a useful approach.

Thanks Teodor.
I suppose I’ve thought of the show/hide feature as something like a client-side version of what you would do in PHP for example - ie nothing to do with responsiveness etc… However of course it is just CSS, so extra care will be needed in some situations like this.

It's: style="display: none;" and of course it gets overriden by !imporant statements. But that's quite too specific for your case and usage of bootstrap .d-* classes

You can apply your own classes or styles as Ben suggested above.