Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chrisbanes opened this issue Dec 13, 2019 · 7 comments
Open
Assignees

Comments

@chrisbanes
Copy link

chrisbanes commented Dec 13, 2019

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
Copy link
Author

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

@jdkoren
Copy link

jdkoren commented Mar 8, 2020

I think this issue also affects FlexboxLayoutManager

@thagikura thagikura self-assigned this Mar 8, 2020
@thagikura
Copy link
Contributor

Thanks for reporting. Let me take a look

@thagikura
Copy link
Contributor

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.

@jakobulbrich
Copy link

jakobulbrich commented Sep 8, 2021

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

@vrabieandreea
Copy link

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

@sriharshachilakapati
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants