Streaming live at 10am (PST)

Wrapping and Clipping at Bottom of Columns

When a component has been divided into more than one column, children at the bottom of a column will sometimes wrap to the top of the next column and/or become visually clipped. Defining a set height for the parent div is not an option because it should responsively adjust its height as content is added or removed or wrapped within it.

Here is my site Read-Only: LINK
Here is my site Shared: LINK

Hi @Vasken,

Thanks for letting us know about your wrapping issue while using Legacy interactions. I imagine that is not what you were expecting, but we’re here to help.

We were able to reproduce the issue you’re experiencing, and would suggest using Interactions 2.0, as it resolves this issue.

The following short screencapture provides a possible workaround:

Hopefully, this was helpful. Feel free to let us know if this is helpful, or if you have any additional questions.

Thanks in advance :bowing_man:

Thanks for you quick response, however this solution does not work because I only want to affect the sibling of the selected component. Repeat the steps in your video except this time make sure that Affect: “Only siblings with this class” is set. You will see the same issue as before. Your video was helpful in identifying what part of the code is broken, however it is still broken. Do you know who can fix it?

Hi @Vasken,

This may be due to the element with the class name of “div-country”

You may note in the following short screencapture that when a height is added to the element, the child elements no longer wrap:

A possible solution would be to add a height to “div-country” on click

Hopefully this is helpful :bowing_man:

Unfortunately, that is not a useful fix for the bug in the Webflow code. We DO NOT need to artificially increase the height of our elements so they are very tall and spaced too far from another and make the page too long. What we DO need is a fix for the bug in the Webflow code - class siblings are being rendered differently than normal when they are shown. When any interaction shows members of a class, there is no logical reason to render it differently whether it’s being targeted as a sibling or not. Is there someone at Webflow who is capable of fixing this bug with rendering siblings?

Hi @Vasken,

We completely understand this may not be the workaround you are looking for.

We have passed on your details to the engineers, though this may be expected behavior as the parent element is responsive based on the elements set height upon page load. Reactive height could be implemented using Javascript, as noted in the previous workarounds to implement height instead of hide/show

Would you happen to have an example you may share where this occurs as you expect?

We’d be happy to share that with the engineers, as well.

Thanks so much for your patience, and help as we look into this for you. :bowing_man:

Hello @mistercreate,

I did more debugging on my end and narrowed down the issues for your engineers. I also updated my example prototypes so they can see these two issues in action.

  1. When using interactions to show a child, the height of the parent div is dynamically adjusted so that the child does not become visually clipped, but this is only happening when all members of the class are being shown. The parent div needs to change its height when any child is shown via interactions, including siblings and selected elements.

  2. When using interactions to then hide a child, the height of the parent div should be dynamically adjusted in order to remove any extra height that was previously added (i.e. return the parent div to its original height). Currently, parent divs are increased in height to prevent clipping when showing all children of a class, but they are not decreased in height when those children are subsequently hidden.

That should be enough information to get these bugs squashed. Let me know if you need more information.

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