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?
Here is my public share link: LINK
Any idea how to fix this?
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!
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:
https://cl.ly/08091r0U1F0E/Screen%20Recording%202017-04-27%20at%2003.09%20PM.gif
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
You’re most welcome!
Good luck with your project!
All the best,
Anna K
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
