flexbox-layout icon indicating copy to clipboard operation
flexbox-layout copied to clipboard

Clipped children when using `flexWrap="wrap"` and large width divider

Open chrisbanes opened this issue 4 years ago • 7 comments

Issues and steps to reproduce

Below you can see a screenshot of a FlexboxLayout, which is clipping it's children:

Screenshot_1576202779

The layout is defined as so:

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingVertical="@dimen/spacing_small"
    android:paddingEnd="@dimen/spacing_normal"
    app:dividerDrawableVertical="@drawable/vertical_spaced_divider"
    app:dividerDrawableHorizontal="@drawable/horizontal_spaced_divider"
    app:flexWrap="wrap"
    app:showDividerVertical="middle"
    app:showDividerHorizontal="middle"/>

The dividers are implemented like so:

vertical_spaced_divider.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="?android:attr/listDivider"
        android:left="16dp"
        android:right="16dp" />
</layer-list>

horinzontal_spaced_divider.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="?android:attr/listDivider"
        android:top="16dp"
        android:bottom="16dp" />
</layer-list>

Expected behavior

I expect the children to not be constrained horizontally, and the title text of each item stays on 1 line.

Each of the children has a width of wrap_context, so FlexboxLayout should be moving the item to the next line if there is not enough space.

If I remove the divider, the items are wrapped as expect.

Version of the flexbox library

2.0.0

chrisbanes avatar Dec 13 '19 02:12 chrisbanes

Having a quick look through the source, it looks like the dividers are taken into account for layout, but not when measuring children.

chrisbanes avatar Dec 13 '19 02:12 chrisbanes

I think this issue also affects FlexboxLayoutManager

jdkoren avatar Mar 08 '20 01:03 jdkoren

Thanks for reporting. Let me take a look

thagikura avatar Mar 08 '20 01:03 thagikura

Found that ItemDecorations length wasn't taken into account when judging if a line wrapping was required for FlexboxLayoutManager, which should be fixed by #541 .

But looks like FlexboxLayout took the divider's length into account when judging if a line wrapping is required (measure phase). I'll continue investigating it.

thagikura avatar Mar 17 '20 10:03 thagikura

Is there any update on when the PR #541 will be merged? It's been a year and a half now 👀

jakobulbrich avatar Sep 08 '21 10:09 jakobulbrich

I've been dealing with the same issue. Would love to know when this gets merged as well

vrabieandreea avatar Nov 04 '21 14:11 vrabieandreea

Is there any update on this issue? It's been a little over three years now 👀

sriharshachilakapati avatar Jan 19 '23 19:01 sriharshachilakapati