Text Box Interaction via CSS

Anvil Q&A
#1

Hi,

somebody could help with the CSS code:

I would like to use the Toolbox Interaction disabeld/enabeld via a CSS-Role for Input and Output Boxes:

The following solutions are working:
pointer-events: none;
disabled: “disabled”;
,however I can not anymore access the Text Box via the Design IDE.

Any solution you tried (interaction: none;)?

BR,
Gerhard

#2

I’ve always used the Python-accessible enabled attribute, also accessible in the IDE:
image

Is there some reason that this doesn’t work in your case?

#3

Hi Phil,

the IDE solution works, however I would like to apply a role to input and output text fields (my app will have more than 100 fields).

BR
Gerhard

#4

The built-in Label component does not allow interaction. In effect, it’s always “disabled”. But if you want to use a TextBox anyway, let’s look at some of the other options:

  1. In the IDE, clicking a checkbox on each field would be easier than setting a role on each field.
  2. In code, setting the enabled attribute to False is as easy as setting a role.
  3. Creating your own custom component, with the settings you want, is fairly easy, so reusing it 100x, may be less work. My own app does that.

And none of these things is going to screw up the IDE.

But if you’re set on using Roles, then others here may be able to help.

#5

Hi Phil,

thank you for the detailed explanation, you helped a lot:
I created my custom component with the role enabled: True;
Works fine.

BR,
Gerhard

#6

Note: enabled = True is the default for all standard components (that have enabled).