Adding a horizontal scroll bar to a FlowPanel of variable length

Anvil Q&A
1

Reviving this topic, I too am facing a similar problem. I want to add components to flowpanel in a loop. And the len of the list can vary for every user. Instead of displaying the components in several line, I want them to be displayed in a single line in a scroll bar. I tried setting overflow to auto and scroll both but none of them worked, Any help will be greatly appreciated.

Clone link

MOD NOTE: This post has been moved from an older topic; in general, we try to avoid reviving old topics that aren’t still directly relevant. If you have a question that relates to an old topic but is slightly different, please make a new topic linking to the old one rather than adding a post to the old topic.

3

Something like this should do it:

adding the appropriate role to the flow panel and the css to theme.css

.anvil-role-flow-scroll-x .flow-panel-gutter {
    flex-wrap: nowrap;
    overflow-x: scroll;
}

edit - corrected spelling

3 Likes
4

Thanks! It worked.
Although you made a minor mistake there of writing no-wrap. I changed it to nowrap and then it worked well

2 Likes