flexbox-layout
flexbox-layout copied to clipboard
Flexbox showing a lot of items on the last line of maxLine
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"/>
I am facing the same problem right now
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.
@mecoFarid it was "randomly", actually based on the smartphone screen width.
same problem for me, maxLine is useless is this case. How did you guys overcome this issue?
@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.
@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.
same problem,please fix
maxline is very important
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
Same problem. I want to scroll when item is out of the maxLine. thanks
same problem...still not fixed
same problem
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
I work around it by custom function max line, inside the class FlexboxHelper
- in function isWrapRequired() remove condition relate to maxLine, it will be not wrap when you set maxLine
- 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. https://github.com/haiithust/flexbox-layout/commit/9cbd2c96ff1e94607524787faed346682437d603
I work around it by custom function max line, inside the class FlexboxHelper
- in function isWrapRequired() remove condition relate to maxLine, it will be not wrap when you set maxLine
- 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
I work around it by custom function max line, inside the class FlexboxHelper
- in function isWrapRequired() remove condition relate to maxLine, it will be not wrap when you set maxLine
- 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
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
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.
Is this issue sorted ? or is there a work around for this ?
bump for solution
Anyone listening here? @thagikura @MGaetan89
Waiting fix it.
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
@act262 can you please post way 1 in java?
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.
- 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)
- set flexLayout max lines 4
- 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.
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!