Wrapping and Clipping at Bottom of Columns

 Return to Index

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. The dynamic height change is occurring when all members of a class are targeted but not when a sibling or selected member is targeted.

Example: click on the options in the lower left and lower right corners.

1. Anguilla - English

Anguilla - English

Anguilla - Español

2. CLICK ME TO SEE WRAP/CLIP

Antigua & Barbuda

Antigua & Barbuda - English

Antigua y Barbuda - Español

3. Argentina - Español

4. Argentina - Español

5. Anguilla - English

Anguilla - English

Anguilla - Español

6. CLICK ME TO SEE NO CLIPPING

Antigua & Barbuda

Antigua & Barbuda - English

Antigua y Barbuda - Español

The example below (lower left corner) uses a fix offered by a Webflow tech (i.e. not using legacy interactions), however it's still broken when I set Affect: "Only siblings with this class". The dynamic height change is occurring when all members of a class are targeted but not when a sibling or selected member is targeted.

1. Anguilla - English

Anguilla - English

Anguilla - Español

2. CLICK ME TO SEE WRAP/CLIP

Antigua & Barbuda

Antigua & Barbuda - English

Antigua y Barbuda - Español

3. Argentina - Español

4. Argentina - Español

5. Anguilla - English

Anguilla - English

Anguilla - Español

6. CLICK ME TO SEE NO CLIPPING

Antigua & Barbuda

Antigua & Barbuda - English

Antigua y Barbuda - Español

The below examples is identical to the one above except that instead of targeting "Only siblings with this class" it targets "All elements with this class". The parent div is now being increased in height to accommodate the popover so it does not become clipped, however this behavior is only occurring when targeting ALL class members. But it needs to dynamically shrink back to its original height when the popover is removed (i.e. recheck the height whenever showing/hiding any child).

1. Anguilla - English

Anguilla - English

Anguilla - Español

2. CLICK ME TO SEE WRAP/CLIP

Antigua & Barbuda

Antigua & Barbuda - English

Antigua y Barbuda - Español

3. Argentina - Español

4. Argentina - Español

5. Anguilla - English

Anguilla - English

Anguilla - Español

6. CLICK ME TO SEE NO CLIPPING

Antigua & Barbuda

Antigua & Barbuda - English

Antigua y Barbuda - Español

The below example also fails when the target is Selected Element. It's very clear that the bug resides in targeting any element other than ALL. The dynamic height change is occurring when all members of a class are targeted but not when a sibling or selected member is targeted, and it should always occur so that nothing gets clipped.

1. Anguilla - English

Anguilla - English

Anguilla - Español

2. CLICK ME TO SEE WRAP/CLIP

Antigua & Barbuda

Antigua & Barbuda - English

Antigua y Barbuda - Español

3. Argentina - Español

4. Argentina - Español

5. Anguilla - English

Anguilla - English

Anguilla - Español

6. CLICK ME TO SEE NO CLIPPING

Antigua & Barbuda

Antigua & Barbuda - English

Antigua y Barbuda - Español