Height/Padding of a Label Component

Anvil Q&A
21

As I mentioned above, it seems that you have to begin with the Material design (and possibly other app types will work).

For example

  • click “new blank app” then “material design”
  • click :heavy_plus_sign: to add a new form and choose “blank panel”
  • add a label
  • create a role (e.g., thin_label)
  • add CSS to make the labels nice and thin
.anvil-role-thin_label {
 margin-top: -10px !important;
 margin-bottom: -10px !important;
}

Does this accomplish what you are referring to?

23

I have it working, going to have to recreate the app component by component, and my tables… still is a solution. Thanks

24

You should be able to share your tables between apps. I don’t see why you would have to recreate them from scratch. Perhaps I am missing something. You can certainly try copying all of your components over (click and drag to lasso them all, copy, paste). There may even be other ways, but yeah not super fun to do this. It would be great to be able to move a form over to a new app directly (there may be a FR on this). I don’t believe that is possible ATM but I could be wrong.

25

To clarify some points here:

Roles:

  • Roles depend on the theme of the app you create.
  • If you create a Material design app you get material design roles
  • if you create a custom html app you get a blank slate for roles because you have a blank theme
    (It’s not that roles are not available in your custom html app - you just don’t have any to select yet)

Copying roles from one app to the next

  • it’s possible but you can’t do this natively - You’d want to check out the apps in Git and copy the theme directory from one app to the other…
    Convert Classic theme to new Material Design theme
  • Similarly - you can copy forms over to new apps with the same method - copying over the form folder into the new app

Padding on blank panel forms

  • I maintain that a text role for the label (which if you look at its css makes the padding 0)
  • And changing spacing above/below on both the BlankPanel and the Label
    In this image, the red border is around the BlankPanel and there is no padding
    Screen Shot 2020-04-23 at 07.48.39
    Screen Shot 2020-04-23 at 07.48.39787×95 5.79 KB
3 Likes