I’ve been loving Anvil, but I noticed a bug when placing many elements:
Whenever the “Adicionar Campo” button is pressed, a new checkbox and text box is inserted into their respective row panels:
def add_field_click(self, **event_args): """This method is called when the button is clicked""" self.checkbox_row_panel.add_component(CheckBox()) self.textbox_row_panel.add_component(TextBox())
But the spacing isn’t the same, I think it’s based on each element individually instead of being adjusted to stay in the same “row” (I mean visually, not structurally).
I think some CSS could fix it but I’m not familiar with Anvil’s CSS and don’t have the time to dig into rn.
Any help is welcome, also, I couldn’t find any place to properly report bugs, should I move repost this somewhere else?
That’s the solution: the components should be in the same row structurally, not visually 
.
It’s impossible to fix it using CSS, because you might be happy with a simple checkbox next to a text box, but what about a date picker, a text area or a custom component that takes the space of 10 checkboxes?
The solution here is to add one container that represents the row, and then add the checkbox and the text box to that container. The good thing is that you don’t need to do that, Anvil does it for you.
A linear panel or a repeating panel or a data grid can do that for you: you define the template form with a checkbox and a textbox and whatever you like, and then… nothing. Anvil will do the job for you. You can have a look at the DataGrid tutorial to understand how it works.
2 Likes
Thanks for the answer, but the tutorial is for displaying any amount of data already stored data, I want to receive any amount of data, how do I make a new set of checkbox and textbox appear once the previous has been messed with or the button clicked (whichever is simpler)?
@stefano.menci’s solution applies
The classes Data Grid, plus Repeating Panel, are designed specifically to solve this problem. They work together, to automate these layout issues. Well worth studying those tutorials.
Those containers generate one form template per item in their items member.
So if you do self.datagrid1.items = items, your datagrid will contain as many rows as the items in items.
The datagrid doesn’t care if the items in items come from the database or you manually build the list on the client side.
Checkboxes, actually template forms containing checkboxes or anything else, are generated when self.datagrid1.items is assigned a value. You can assign a value to it either via databinding or explicitly from code. Every time self.datagrid1.items changes, all the forms are regenerated.
