Questions about changing Material Design's theme.css

Anvil Q&A
1

I’ve found that the text in the Label component does not line up (controls are side by side) with the text in a Drop Down component ie. the Drop Down component’s text sits ~4 pixels higher than the Label component. So I made a change to theme.css to fix this.

Is me changing theme.css ok? Is this considered a bug in the Material Design? If I make changes to theme.css and you guys decide to update Material Design’s theme.css, will my changes be lost (I assume yes).

What should the best practice be in this situation?

2

Hi Peter,

You can set the Label’s role property to input-prompt to make it line up with input controls (TextBoxes, DropDowns, etc)! You can find more tips and tricks like this in our guide to the Material Design theme.

Changing theme.css is an entirely legitimate thing to do, but if you had needed to edit the CSS for something simple like this, we’d probably have considered it a bug. Thankfully, there’s already a way to do it :slight_smile:

3

No.
When you create an app you get the theme folder from the template. After that you can modify it and there is no link with the template.

In my company we use our own standard theme app to test our standard-page.html and theme.css.
When we change it we use git to pull, copy the whole theme folder and push as suggested here. We manually repeat this process with all the apps that share our standard theme (until the Anvil guys will give us an official way to include the theme in the dependencies).

1 Like
4

Meredydd, looking at the example in the Guide to the Material Design Theme, the Label and DropDown text don’t appear to line up:

image

To my eye, the word “DropDown” sits 3 or 4 pixels higher than the text in the Label :wink:

5

Meredydd, just saw this in theme.css:

/* Component: CheckBox, RadioButton /
/ Ugh. These are definitely TODO right now. */

:crazy_face:

6

Thanks, the vertical alignment of the DropDown text does need fixing! I’ve raised an issue in our tracker.

7

And it’s now fixed! If you create a new Material Design app, DropDowns will now line up properly.

If you have an existing a Material Design app, you can apply the fix yourself by editing line 635 of theme.css. Previously it was

.anvil-dropdown select.form-control {
  /* ... */  
  padding: 4px 2em 4px 0;

You should change it to:

.anvil-dropdown select.form-control {
  /* ... */  
  padding: 8px 2em 4px 0;
1 Like
8

Meredydd, could you also vertically center the text in radio buttons (the text is too high)? Example:

image

9

I will add a comment to this post instead of creating a new one because it seems to be in topic: I noticed that after clicking on the edit button on this show & tell app, the dropdown appears one pixel higher and the textbox appears one pixel lower compared to the text of their labels.