Make Anvil more CSS Free

Feature Requests
#1

If you ask people who built their projects with Anvil, I am sure that 90% will admit that they used custom CSS roles as well. I believe that Anvil components lack many important CSS properties. It will be great if we could have more properties like border-radius, background image, filters, height, paddings (left and right), and border-left/right/top/bottom property as well.

Also, I believe that Anvil components should have a css property to them as well alongside roles. So that at times, you can just adjust the CSS of a component without creating an entire role for it. This will also allow you to see your changes live

Basically I need something like this:
Screenshot (77)

I also made a clone demonstrating it. The only problem being that it will not show changes live.

https://anvil.works/build#clone:ERZ536UXBXDZHPZM=LOMD2JJHPNMMOQ5EI6IJFC5V

15 Likes
More designer control properties and options
#2

I think that if we could make a custom CSS for each form / component the same way we can make a custom HTML (but separate) and have a simple string field to set a specific component in our form to have a class, that would be awesome.

A lot of times I use Custom Anvil Roles that are used in different contexts and different components types, but even more often I see myself creating a new Anvil Role to use in just one field of one specific form, which makes the global CSS a little too [more] confusing.

5 Likes
#3

I used to mess with css more.
I still do it for roles/classes that affect the whole app, but for little things now is possible to do this:

from anvil.js.window import jQuery as _S

    dom_node = _S(anvil.js.get_dom_node(self))
    dom_node.find('[anvil-role="five-columns"]').children().css('column-count', n_columns)

In this case I am dynamically changing the number of columns on all the children of components with the five-columns role.

It is not Anvilli-ish, but it does the job.

6 Likes
Component properties for Margin and Padding
#4

I am new to anvil and come from an html/php/css background, the first thing I looked for was CSS capabilities. I’m also new to python and Anvil seems to fill a massive gap in making an easy front end UI. However, from what I see so far, it’s not straightforward to create custom css and this is something Anvil could really benefit from.

If, instead of just one property, like set the border, you could say, that field is the { } for the CSS you could literally add any css you want. I don’t know how easy that would be for Anvil to do, but for me, that would make a good UI creator, into an amazing one!

Of course for people who aren’t UI creators who don’t know CSS, the basic choices like colour and border are great but maybe an advanced option could be offered.

4 Likes
#5

Or add the CSS options like Webflow or Figma do it.

#6

From the form editor you can only assign one role, but from code you can assign a list of roles, similar to assigning many css classes.

It is not what you are asking for, but it still allows to do things that were impossible when only one role could be assigned from both code and form editor.

#7

You can? How? You mean using a js function or like self.component.role = 'role-1 role-2' or even self.component.role = ['role-1', 'role-2']. Does this work? This is new to me…

1 Like
#8

Yes the list version should work

2 Likes
#9

Ok… The good part is that this changes everything for me. If I can apply multiple classes, even if just with code, that makes a lot easier and this means I can finally delete multiple roles doing almost the same.

The bad part is that this changes everything for me. :sweat_smile: I will need to revisit my code in lots of places hahaha.

2 Likes
#10

That happens so often with Anvil for me, both as I learn new things, and as Anvil Central adds new features!

2 Likes
#11

Another approach (if I’m understanding correctly):

#12

That would help to reduce the roles in my app, if some role is required only few times or to apply small changes.

1 Like