Streaming live at 10am (PST)

Help with toggling view of columns using interactions



I have a problem with columns that dont adjust correct when showed on a show and hide interactions.

This first picture shows how I want the text to be adjust to "icon-button:

This second picture shows how i dont want the text to be adjusted. The text that shows should be under the "envelope".

Any idea how to fix this?


Here is my public share link: LINK


Any idea how to fix this?


Hi @Erik

Can you please share your read-only link so I can look further into your issue?


Hi @Anna_Kelian

Here is my read-only link:

Its on the "Sälj Häften" page were the issue exist.



Hi @Erik

Thanks for sharing the link.

The interaction used to hide the columns has display: none; set as effect.

Display: None; "removes" the column from the row, moving the following column(s) to the left.

To keep each column in it's original place, right under the relevant icon-button, replace the Display : none; settings in all related interactions with opacity: 0; to hide the element.

Don't forget to also replace Display: block; with Opacity: 100%; in all relevant places.

Hope these animations explain it better:

​Hope this is helpful.

All the best,
Anna K


Thanks for awesome support:)

I got it to work but the problem now is that there is a big white space when the columns dont show (see print screen).

I guees thats because the columns are set to zero opacity and not hidden.



Glad it works!

To fix the white space, whenever you set opacity :0; also add height: 0; and whenever you added opacity :100%; also add height: auto;

All the best,
Anna K



Now it works perfect. Thanks a lot!


You're most welcome!

Good luck with your project!

All the best,
Anna K

closed #10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.