Repeating Panel--horizontally

Hello Friends,

I’m trying to show product options with an image and label for each option. I have this working with a Repeating Panel component, but I’d like to have the options repeated horizontally instead of vertically. What’s the best way to go about that?

Thank you,

Jeff

Hi Jeff,

Have you seen the other posts about horizontal repeating panels? I think that they may help.

Example:

and

Hi @alcampopiano

Thank you, for the tip–I just came across that in my search too. It’s very close to what I need. Is there a way to remove the horizontal scrollbar (and have the additional items wrap to another line)? I think what I’m looking for is very similar to how Flow Panel would do it.


Thank you,

Jeff

Would it be easier to put the image and the label inside a container, and then put that container inside a FlowPanel?

This way you’d get your wrapping for free.

You can add components to a container programmatically. This way your FlowPanel can be populated in an automated manner, rather than having to drag and drop a bunch of elements into place.

Just an idea in case it helps.

Hi @alcampopiano

Would you have a full example of using a flowpanel with a template? I haven’t been successful in my attempts to add components programmatically thus far (especially with an Image object).

Thanks again!

Jeff

If you go the FlowPanel route, you wouldn’t need a repeating panel or its companion template.

You could extrapolate from something like this:

for row in app_tables.my_table.search():
  
  picture=Image(source=row['picture'])
  name=Label(text=row['name'])
  
  lin_panel=LinearPanel()
  lin_panel.add_component(picture)
  lin_panel.add_component(name)
  
  self.flow_panel_1.add_component(lin_panel)

This assumes that there is a DataTable that has a text column for names and a media column for your pictures.

Of course, the posts above may also work, but this seems like it might be simpler in some respects.

Good luck!

2 Likes

That was perfect! Thank you! I must have tried that 20 different ways and couldn’t get it 100%.

Jeff

1 Like