[M3] Legacy 'read-only' role not working with M3 dependency

Anvil Q&A
1

Hi,

I am using M3 as a dependency on a legacy app.
I have a custom role to ‘disable’ components without changing their look&feel to build a read-only form:

.anvil-role-read-only {
       pointer-events: none;
       cursor: not-allowed;
}

When I use this role on legacy components such as TextBox, it works fine and disables the ability to type in text. But when using a m3._Components, it doesn’t change anything.

I have tried toying directly with a copy of the m3 dependency but to no success not being an expert in css.

Any ideas on how to solve/where to inject this css?

Many thanks,

Blockquote

2

have you tried

.anvil-role-read-only {
       pointer-events: none;
       cursor: not-allowed;
}

.anvil-role-read-only * {
       pointer-events: none;
       cursor: not-allowed;
}

and possibly with some !important thrown in…

3

I’m just going to mention a PR I made some time ago about the option to read-only without disabling in certain fields for m3, since it appears to be a similar request:

For myself, I did a few more complex things, like creating a descriptor for read_only that disables the component without any of the native style for disabling and turning a component with appearance = filled to appearance = outlined, but in your case I think what @stucork said is probably the answer, or maybe just .anvil-role-read-only input.

4

I tried @stucork solution but it didn’t work out.
I figured out a workaround in using it on the containers (ColumnPanel, FlowPanel) in which my TextBox, Dropdown are placed. By setting the containers role to ‘read-only’, their design stays as-is but they are not editable/clickable anymore.

5

it looks like the roles for some m3 components are not being applied