Flow panel with fixed dimensions and vertical scrolling

I am trying to build a flow panel with a variable number of elements within it. However, I want to fit the flow panel width and height and enable vertical scroll if the number of elements exceeds the allocated space.
Also, I am not able to fix the height of each of the element within the flow panel. Please see image below.

I am also trying an alternate approach of using a DataRowPanel and line up each of my “cards” in a single row and make them horizontally scrollable. I followed the instructions here


Using the code below and setting the css and role as appropriate still does not produce a horizontal scrolling effect:
row=self.data_row_panel_1
for _ in range(0,25):
textbox = TextBox(text=“Alice”)
row.add_component(textbox, column=_)
self.data_row_panel_1.role=‘wide’

I get this output without the scroll bar

Thank you.

Hello,

I can try to assist with your last question.

Something like this works:

self.data_grid_1.role = 'wide'
row=DataRowPanel()

for c in self.data_grid_1.columns:
  textbox = TextBox(text="jnk")
  row.add_component(textbox,column=c['id'])
  
self.data_grid_1.add_component(row)

This is building everything programatically but you could also have added any of these components through the GUI as well. With lots of columns though, a programatic approach is nice. Data bindings to rows in a data table would also be possible if you need to interact with your database. Hopefully though, this will get you started.

Here is a clone:
https://anvil.works/build#clone:JFEOW4J262WRRGXH=GRGI7BT4NJFLHMDKBRWEN45U

Also, in general, you can make the code on the forum easier to read by following these instructions.

Also, I am not able to fix the height of each of the element within the flow panel

We hear you - this is a much bigger pain than it should be, thanks to HTML!

The simplest thing is to use the Role mechanism to fix the height of each element in CSS. Set the role property of those elements to some value (eg fixed-height), and then add something like this to your theme.css in Assets:

.anvil-role-fixed-height {
  min-height: 200px;
}

That will ensure that all of those elements are at least 200px tall.

Sorry, let me try to rephrase what I am trying to achieve.
I am trying to create a Horizontal Repeating Panel. I have read the other posts on horizontal repeating panels and felt that it was a convoluted way to achieve the intended effect.
I am trying to achieve the same effect using a simple row panel with the scroll effect.

In your example, there are column headers created in UI, which I am trying to avoid, because, I dont know upfront how many columns I will have, so I need to create these programatically.

Summary: I want to create a horizontal repeating panel with scroll effect using a single DataRowPanel without column headers and using code only, without setting “A very long column names” in the UI.
PS: I am aware of the other horizontal repeating panel solution posted on the forums. I am looking for a simple alternative.

Thanks

When it comes to programatically creating columns, please have a look at the documentation on DataGrids. You should be able to create as many columns as you like by following those instructions. This applies generally to DataRowPanels and RepeatingPanels as well.

To make things clear and to make it easier to assist, please show what you have tried with code and a simple example app.

A post was split to a new topic: Adding a horizontal scroll bar to a FlowPanel of variable length