"Edit Custom CSS" gives me the Bindings settings instead

[Cnote43]

I must be missing something incredibly simple and obvious. When I click the "Edit Custom CSS" button, this is what I see:

which seems to be the Bindings screen. Looking at this discussion it seems like I should just be seeing a box where I can enter CSS (though that discussion is 9 months old). I've tried this on multiple components and I always get the Bindings screen. I've looked though a bunch of other discussions and the docs but can't figure it out.

What am I missing?

[melohagan]

Hey @Cnote43

Have you tried entering some inline CSS into the box?

E.g.

color: red;

The reason it now shows Handlebars and JavaScript is because the Custom CSS now supports bindings! (I'll update the docs, I don't think they reflect this change)

So if you had some App state that stored a css variable then you could do something like:

color: {{ State.Color }}

[Cnote43]

Thanks, @melohagan! That works for some components. I had been trying the <style> tag based on a response to an older issue.

Related question - is there any way to apply CSS to form components? I'm trying to increase the font-size, but the CSS isn't getting applied.

[melohagan]

Unfortunately the Custom CSS is inline, so it will only apply to one div level, which may or may not work.
You may need to build a custom form field: https://docs.budibase.com/docs/custom-component#example-custom-form-field-component

[Cnote43]

Got it. Thanks!