Make Anvil more CSS Free

[divyeshlakhotia]

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:

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

[gabriel.duro.s]

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.

[stefano.menci]

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.

[denise.field111]

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.

[gerbertdelangen]

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

[stefano.menci]

@denise.field111

instead of just one property

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.

[gabriel.duro.s]

@stefano.menci

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.

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…

[rickhurlbatt]

Yes the list version should work

@gabriel.duro.s

self.component.role = [‘role-1’, ‘role-2’]

[gabriel.duro.s]

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. I will need to revisit my code in lots of places hahaha.

[jshaffstall]

@gabriel.duro.s

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

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

[hugetim]

Another approach (if I’m understanding correctly):

Alternate row colors & add timestamp on check event

For more information on how to add a role for striped Repeating Panels. I figured out how to make this work in both the designer and while running. First, I made a role just for Data Grids and another just for Repeating Panels. Second, I added some JavaScript to the HTML to add one of two classes to the body depending on whether it was in designer mode or not. Here is the HTML: <script> if (document.querySelector('.designer')) { document.querySelector('body').classList.add('in-designer…

[KR1]

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

[tobias.carlbom]

Hi,

I hope this is not a duplicate otherwise feel free to delete

It would be awesome if each individual anvil component has a advanced tab where you can add individual css.
I know its possible to do this using anvil roles => assign the role to a component, but i find it kind of time consuming. Also its possible by using the anvil.js module.

But this way seem very straight forward; you could just add your css; while doing it you see the changes right away in the designer