Flexbox showing a lot of items on the last line of maxLine

[guuilp]

Issues and steps to reproduce

I've been trying the new "maxLines" attribute, but its behavior is not like what I was expecting. Let's think about a list with 50 items, 4 per line: if I set the maxLIne to 3, the first and second line will show 4 items per line, but the third line will show 42 items, instead of 4. Is there a way to show 4 items in all lines and ignore the others 42?

Expected behavior

Ignore items after third line.

Version of the flexbox library

1.0.0

Link to code

        <com.google.android.flexbox.FlexboxLayout
            android:id="@+id/items_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:maxLine="3"
            android:paddingTop="20dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"/>

[titooan]

I am facing the same problem right now

[mecoFarid]

How did you get 4 items in the first two rows? Was it done with some attribute or FLexBox just randomly added 4 and pushed others into 3rd? Because I am looking for an attribute that defines max column count.

[guuilp]

@mecoFarid it was "randomly", actually based on the smartphone screen width.

[redmanit]

same problem for me, maxLine is useless is this case. How did you guys overcome this issue?

[guuilp]

@redmanit I did it manually... Stopped using maxLine, set height size to a fixed dp number and when the user clicks on expand, I change the height to wrap content.

[redmanit]

@guuilp so you need to calculate that fixed height size programmatically base on item height and padding, right?
Btw there are some other FlowLayout librarys support real maxLine feature not like this Google's one.

[manondidi]

same problem,please fix

[manondidi]

maxline is very important

[chdhy]

Same problem. I just want to show limited items by set maxline. Don't show more item if the item can not visible fully.Don't shrink the margin for the visible item of last line.thanks

[hugh114]

Same problem. I want to scroll when item is out of the maxLine. thanks

[ukyo6]

same problem...still not fixed

[coding0man]

same problem

[ghost]

Please fix that, it's very important feature for me and I think for many people too.
For now I restrict height of FlexboxLayout but it's dirty hack

[haiithust]

I work around it by custom function max line, inside the class FlexboxHelper

1. in function isWrapRequired() remove condition relate to maxLine, it will be not wrap when you set maxLine
2. Modify function calculateFlexLines() add condition if mFlexContainer.getMaxLine() == flexLines.size() break it.

You can find my change here, but sorry for code format style so you hard to read.
haiithust@9cbd2c9

[shaomaicheng]

I work around it by custom function max line, inside the class FlexboxHelper

1. in function isWrapRequired() remove condition relate to maxLine, it will be not wrap when you set maxLine
2. Modify function calculateFlexLines() add condition if mFlexContainer.getMaxLine() == flexLines.size() break it.

You can find my change here, but sorry for code format style so you hard to read.
haiithust@9cbd2c9

i do this，but do not work，my maxline is 3， but can see 5 lines

[haiithust]

I work around it by custom function max line, inside the class FlexboxHelper

1. in function isWrapRequired() remove condition relate to maxLine, it will be not wrap when you set maxLine
2. Modify function calculateFlexLines() add condition if mFlexContainer.getMaxLine() == flexLines.size() break it.

You can find my change here, but sorry for code format style so you hard to read.
haiithust@9cbd2c9

i do this，but do not work，my maxline is 3， but can see 5 lines

Hmm, could you try my repository https://github.com/haiithust/flexbox-layout

[Anthonyeef]

Have you tried add layout_flexShrink="0" to your flex item?

I learned this from the library unit test code: https://github.com/google/flexbox-layout/pull/424/files#diff-dfc1316fbcda7918a7dfadcea4a274a8R3982

[svanegas]

Have you tried add layout_flexShrink="0" to your flex item?

I learned this from the library unit test code: https://github.com/google/flexbox-layout/pull/424/files#diff-dfc1316fbcda7918a7dfadcea4a274a8R3982

@Anthonyeef this would help a bit, although if last element exceeds the width, it will be shown truncated anyways. It shouldn't be shown in this case.

[DarrelAeturnum]

Is this issue sorted ? or is there a work around for this ?

[desgraci]

bump for solution

[codefury]

Anyone listening here?
@thagikura @MGaetan89

[act262]

Waiting fix it.

[act262]

work around way 1:

layoutManager = object : FlexboxLayoutManager(requireContext()) { val fixMaxLine = 3 override fun getFlexLinesInternal(): MutableList<FlexLine> { val originList = super.getFlexLinesInternal() val size = originList.size if (size > fixMaxLine) { originList.subList(fixMaxLine, size).clear() } return originList } }

way 2:
dynamic recyclerView height and override canScrollVertically=false

[ararTP]

@act262 can you please post way 1 in java?

[preludezdev]

For anyone who is still struggling, here is one trick idea.

Let's say you wanna make max line 3 flexbox layout with non truncated content on the last line.

1. set FlexBoxLayout "height" to wrap_content and "layout_constraintHeight_max" to expected value of height when it is set to 3 lines (line heights + dividers)
2. set flexLayout max lines 4
3. then flexbox layout will show only three lines due to "layout_constraintHeight_max"

That's it!
Just be careful that your last line(ex. 4th line) will be thrown away.

[bangdinh]

work around way 1:

layoutManager = object : FlexboxLayoutManager(requireContext()) { val fixMaxLine = 3 override fun getFlexLinesInternal(): MutableList<FlexLine> { val originList = super.getFlexLinesInternal() val size = originList.size if (size > fixMaxLine) { originList.subList(fixMaxLine, size).clear() } return originList } }

way 2: dynamic recyclerView height and override canScrollVertically=false

thank you!

[Mr-Zheng-yz]

work around way 1:

layoutManager = object : FlexboxLayoutManager(requireContext()) { val fixMaxLine = 3 override fun getFlexLinesInternal(): MutableList<FlexLine> { val originList = super.getFlexLinesInternal() val size = originList.size if (size > fixMaxLine) { originList.subList(fixMaxLine, size).clear() } return originList } }

way 2: dynamic recyclerView height and override canScrollVertically=false

nice work