CSS code for mandatory fields set by the layout

Question

We’ve put the mandatory fields lightblue in de css custom style sheet.
However, this css code does not effect the mandatory setting from the layout.
So if we set a field mandatory in the layout it’s not highlighted in light blue.

There is this really small light red arrow in the label, but users oversee this small red star.

Is there a css change which effects the mandatory fields set by the layout as well.
We want to have ALL mandatory fields light blue en not just a part of it.

Sebastiaan Meijerink · Accepted Answer

Hi,You’re right. In the current version, the mandatory CSS class is only added for fields that are mandatory in the model, not for fields made mandatory by the layout procedure. What both cases do have in common is the field label: it always gets the class Mui-required (that’s the class that shows the red asterisk).So if you select on the label, you catch every mandatory field, whatever made it mandatory. Replace your current rule with something like this:/* All mandatory fields: set in the model or by the layout procedure */[data-form="control"]:has(.Mui-required) .MuiInputBase-root {  background-color: lightblue;}If your current rule styles a different inner element, keep that part and only replace .mandatory with [data-form="control"]:has(.Mui-required).This uses the CSS :has() selector, which all current browsers (Chrome, Edge, Firefox, Safari) support. The highlight only shows while the record is in edit mode, the same as the asterisk.Sebastiaan

Edwin Saan · Answer

Hi Sebastiaan, thanks a lot. This works! Much better now.

Sign up

Login to the Thinkwise Software Community