How to set 2 column dynamic text boxes

Anvil Q&A
1

I have this code that creates a name and a date of birth box

      self.tb1[i].role = "input"
      self.cp1.add_component(self.tb1[i], row=1, col_xs=1, width_xs=1)#this adds the traveller name boxes
      self.tb2[i] = DatePicker(format="YYYY-MM-DD",min_date="1900-01-01",placeholder=f"traveller {i} D/O/B")
      self.tb2[i].role = "input"
      self.cp1.add_component(self.tb2[i], row=1, col_xs=1, width_xs=1)#this adds the traveller date of birth boxes

At the moment they display on the page


TextBox
DatePicker

I want them to display as:

TextBox DatePicker

I tried setting the column on the code to col_md=6 like you would on a bootstrap site, but nothing changes?? Any thoughts?

2

You could place them in a flow panel. That’s one way to make things have a horizontal layout.

Hope I’m understanding the question correctly.

3

hi yes you are understanding right, I want them side by side. Thanks will give that a go

4

I solved it.

I created 2 columns inside the flow panel and put the data tb1 into the first column and tb2 into the second. the only issue I may have is the tab order.

EDIT: I’ve had to revert back to my previous layout as the tab order goes down instead of across and I dont think you have the option of setting the tab order on Anvil yet?

5

You could use the lost focus event on the first component to set the focus on the next component - that way your tab will move to the next one you want it to.

Just another thought, instead of creating the text boxes and date pickers programmatically, why not create them in another form in the IDE and just add that form to your container programmatically. This way you can layout your components how you like and then add an infinite number of that form to your main form

2 Likes
6

Good idea, I didnt think of that!