Applying a role to a textbox removes the ability to enter new text

Anvil Q&A
1

What I’m trying to do:
I have a grid of 81 text boxes in a 9 x 9 array. With no styling applied, I can enter text in the textboxes OK, however when I apply a role to the textbox, I can no longer enter text in the textboxes.

I have two roles, myrole1 and myrole2 and they are defined in theme.css
They are applied in Python a function: def populateCells(self) when you check the checkbox.

Here is a link you can use to clone the app:
https://anvil.works/build#clone:F4Y3I3OOESKSNZVT=D7QZ67VWCK3E4IQW3ONXJHZU

2

This appears to be something to do with the margin left line. Removing these lines or reducing the margin to 12px allows the text to be edited. Was it meant to be 120px?

Original Role:

.anvil-role-myrole2 {
  margin-left: 120px;
  padding-left: 18px;
  background-color: #ddf;
}

This works but doesn’t look great:

.anvil-role-myrole2 {
  margin-left: 12px;
  padding-left: 18px;
  background-color: #ddf;
}

Removing the margin line makes it look better
I am guessing that the text is still editing but you can’t see it as it is ‘outside’ the component

3

Thank-you, rickhurlbatt, you have hit on a solution, although I still do not understand why.
I am finding the whole issue of styling, in Anvil apps, a bit strange, and limited, compared with the normal html and css, I am used to. The design editor only lets you do some minor changes to components, unless I am missing something. Can you advise any links to where I can get some guidance? I work best with examples, I can copy and re-work.
Thanks again,
Regards, Chris

4

I am not sure what you are trying to achieve with the role.
Most things like text alignment and background colour can be addressed directly by properties of the component (TextBox Docs). All of which can be set in the editor or via code.
For example:

# Change the background colour
self.input_box.background = '#ddf'

# Change the text alignment to centered
self.input_box.align = 'center'

Additionally you could also build a custom component and then add that in place of a standard TextBox.

What outcome do you want to achieve with the text boxes?

5

Rick, Thanks for your reply.
I am not ready to build a complete app, just yet, I am just trying to familiarise myself with Anvil to see what can be done, so please excuse my ignorance.
So in the meantime, I thought I would try to display a grid of 81 cells laid out like a Sudoku.

In the designer, I first tried to lay Textboxes, side by side, but they always ended up below each other in a column. So I thought I would try to first add a Datagrid and then add Textboxes to that, thinking it would act like a container, but could not insert anything into the grid, using the designer.
Finally, I ended up using Python code to add Textboxes at run-time, and using a role to try to position them - very crude, I know.

I am probably going about this in completely the wrong way, but I am trying to learn.
Regards, Chris.

6

That seems odd. When you insert a component, you need to slide the blue handle at the right of the component to adjust its width.

I think though I would also have added the textboxes by code since I wouldn’t really want to set them all out manually. You could also use @hugetim’s matrix component: Display a list of lists in a grid

Once you have all the components in the grid panel, you can do something like this to update all the properties at once.

# Get all the 81 components
text_box_list = self.grid_panel.get_components()

# Update the properties one by one in a for loop
for box in text_box_list:
  box.align = 'center'
  box.background = '#ddf'
  # or what ever you need to do
1 Like
7

Rick,
Thanks for that - most useful and thanks to @hugetim.
I’ll have a go tomorrow.
Regards,
Chris

1 Like
8

Just as a heads up, Matrix doesn’t (yet?) implement the get_components method, if you end up trying that approach.

But I guess you could do text_box_list = [item for row in self.matrix.items for item in row]

(I think you’ll also have to then do a self.matrix.items = self.matrix.items after making all the changes to update the underlying DataGrid.)