Q: Advanced UI Design: Custom CSS Fields and Conditional Styling Techniques
1. Do we have a custom CSS code field for each UI element of Nocode-X, where CSS settings are seamlessly synchronized between the graphical UI (if such a CSS parameter is available in the UI) and custom CSS code? This would allow users to modify any aspect through custom CSS - even elements not accessible through the graphical UI.
2. Can we set up conditional styling for elements? For instance, when a parameter (page scope or element scope) is true, the element's background should be green; otherwise, it should be red (default version is active). This should not be limited to just visual customizations of those "conditional versions," but also allow assigning different actions to each version, and also hiding or unhiding certain UI elements (for instance, datatable columns) for specific "conditional versions," etc.
Tristan_NoCode_X
Apr 1, 2025A: Hey Ulkarpuk
Thanks for this awesome question!
At the moment you can only use the predefined setting on the UI. However we have been playing with this idea for a long time now & based on the questions that we receive regarding it we have decided to implement it. It will probably hit the platform in the next 2 or 3 weeks.
The way it will work is that you have a css file that you can edit on application level & you can add classes to each UI element you use on your pages which will then allow you to use your css.
This would actually be a nice step towards animation as well.
Is this how you envisioned it?
Kind regards
Tristan
ulkarpuk
Verified purchaser
Hey Tristan,
Thank you for your response! If you’re asking me, I think having CSS settings at the application level, along with the ability to apply classes to UI elements, is a solid approach. In this case, we’d also need an “apply CSS class” action to make it fully functional.
Verified purchaser
That said, for simpler use cases, I’d prefer an additional option: a “custom CSS” field attached directly to each UI element. This field could be synchronized with the graphical UI settings of the element itself. Such an approach aligns more closely with the no-code philosophy, allowing us to make minor CSS adjustments without needing to access the root CSS file for every small change.