How to set height of dropdown in datagrid?

Anvil Q&A
1

I want to set the height of the M3 theme dropdowns in my datagrid. Thus I first created a new role called “small-dropdown”, then added this to my theme.css file:

.anvil-role-small-dropdown {
  height: 5px;
  line-height: 5px;
}

However, after setting that role to the dropdown in my DataRowPanel nothing changes, the dropdowns in the table keep their height as they were. Any ideas what I am missing here?

2

To confirm, I’d have to see a Clone of your app, but you probably need to apply the role to the dropdown component itself, not the DataRowPanel

3

I did apply the role to the DropdownMenu component itself.

4

Oh I miss read your original post. Could you share a clone example of the dropdown in the DataRowPanel? It’s pretty hard to see why it might not be applying without the full context of the DataRow.

5

Do you mean I should create a small demo app?
How can I share that with you?

6

Yes, exactly.

1 Like
7

Sure, here is the link to my app:

It is super simle - I just created one form with one dropdown menu, created a role for dropdown menus and assigned that role to the single dropdown widget I have in this app. Then I have set the height of this role to 5px, as shown above, but the height of the dropdown does not change in the app.

8

How many pixels (px) high is the text in your dropdown?

9

Well, it’s definitely not 5px:

image

I don’t want to change the text size, but the overall height of the whole dropdown widget.

10

I’ve been playing around with it, and nothing seems to be applying. Checking the Dev console, I’m not even seeing the role added anywhere in any elements class list.

I was looking at the code in material-3-theme/client_code/_Components/TextInput/__init__.py at master · anvil-works/material-3-theme · GitHub for the M3 dependency and the role never seems to be set (this is the component who gets its role set within the dropdown).

So maybe it’s a bug with the M3 dependency, or am I missing something?

11

I really don’t understand making the dropdown 5px high, when the text it needs to display is 2-4x that high. What am I missing? Who would be able to read the text?

12

5px was just to test whether it works in general.
The desired height is not important, but being able to set it is.

1 Like
13

And like I said, even making the background red didn’t show anything, so I’m still leaning towards this being an M3 bug… but my track record with such bold records isn’t great :laughing:

1 Like
14

It looks to me like the dropdown_menu component is missing the role property, so no css is ever being applied.

I’ve raised it as an issue here.

3 Likes
15

This issue is now fixed in Material 3 v1.2.4!

The problem was that the DropdownMenu’s role property just sets the role property of the underlying TextBox, but the role property for the TextBox wasn’t actually implemented.

To see the fix in existing apps, go to your app’s Settings > Dependencies, and change the Material 3 Theme dependency version to v1.2.4.

1 Like