IMPLEMENTED: Interaction + grid -> changes to display: block

Feature Requests / Improvements
1

Interaction + grid → changes to display: block
(Have custom breakpoint enabled - might be related)

Setup:
2 buttons, 2 containers, both containers have a grid repeat(3, 1fr)
Children have classes assigned.

Buttons have 2 interactions set:

  • click
  • Show element
  • CSS selector
  • #selector-name

AND

  • click
  • Hide element
  • CSS selector
  • #other-selector-name

All looks fine on page load.
But once I click on of the buttons, the display switches to display: block

Before click on button:

image
image1920×762 164 KB

After click on button:

image
image1920×809 137 KB

Setup in builder:

image
image1920×811 125 KB

2

To add,

Just did the same thing with nestable tabs - and then it works fine.
(just added the containers inside the panes…)

3

I had this problem. The show element interaction only does display block. The solution was to do set and remove attribute instead. And then I have a css class with display:none that gets added or removed from the element based on the click. And then have the display:grid on the element itself.

4

Haha, that’s problem solving.

Can’t use display none here.

In my case it means it disappears from the dom. Which would be bad for SEO since it contains homepage links to the pages. So I need them to ‘be there’.

So in my case tabs will be better.
Still cool to now that’s how to solve it for now.

5

Hi @MarketingSpectrum ,

Thanks for highlighting this.
You are right, currently, the Interactions hide/show element is using display:block and display:none on the target element.

I have added this into the improvement suggestion which we will follow the original element display value when performing hide and show.

As a workaround, I will suggest you to create a yourHide CSS class in Bricks > Settings > Custom Code > Custom CSS

Example:

.yourHide {
  display: none !important;
}

Then use Interaction Toggle Attribute / Set Arttibute / Remove Attribute to control the class on your target element.
image

Hope this helps.

Regards,
Jenn

3 Likes
6

Thnx for checking and getting back, as stated above display:none is not an option in this case.

But the tabs workaround works for now untill the slides work with custom breakpoints. :grin:

7

Hi Michael,
We’ve added this improvement in Bricks 1.8.2, now available as a one-click update in your WordPress Dashboard.

Please let us know if you are still experiencing issues.

Best regards,
timmse

1 Like
8

Wow, this is huge!

Many thanks to Jenn to get this implemented.

It works very nicely and now many new possibilities await.

Cheers

Patric

9

Hi, there is an issue with this, how would you allow an element to start with display:none?
There would be no start display value given besides display none?
Visibility:hidden; doesn’t remove the actual element but just hides it. Margin etc. will still be added.

How would one tackle this issue?

Small edit:
It would be possible to add an interaction to each element i want to be hidden from the start that hides the element once content has been loaded, with a delay of 0s targeting itself.

However, this isn’t optimal as it requires a lot of extra work.