Streaming live at 10am (PST)

Help with toggling view of columns using interactions


#1

Hello

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?

Thanks!

Here is my public share link: LINK


#2

Any idea how to fix this?


#3

Hi @Erik

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


#4

Hi @Anna_Kelian

Here is my read-only link: https://preview.webflow.com/preview/idrottsrabatten?preview=b09c637a21af0764ef81185623923b20

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

Thanks!


#5

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


#6

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.


#7

@Erik

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


#8

@Anna_Kelian

Now it works perfect. Thanks a lot!


#9

You're most welcome!

Good luck with your project!

All the best,
Anna K


#10

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