Trying to apply custom class to text field

Not sure how this all works, but looking here and there I cooked up an attempt at customizing the text field being used on a custom collection with a CSS class made available via an addon that I’m working on.

I have placed the following inside the “options” attribute of the field in question:

“cls”: “myaddon-readonly-field”,
“readonly”: true

The “myaddon-readonly-field” is for now just a dummy class made available by the CSS file being loaded by the addon. I have already tested said CSS file by setting the background color of the “body” tag and that worked OK.

What is puzzling me is that the “readonly” attribute is being picked up (the field is marked as readonly when creating/updating entries), but the “cls” attribute however is not working.

I have even placed a console.log(opts) line inside the this.on(“mount”, function () { … }); of the “field-text” (riot?) component inside the cockpit/modules/Cockpit/assets/components.js file, and this is what is logged to the console:


BTW, the “default” attribute also works (I’m using that on another text field), with the informed default value being picked up and shown/used.

Any help on how to handle all this will be greatly appreciated.

You are right. Somehow, the cls option (and also the required option) got lost in the past. It should be fixed in this PR:

Not sure if I’m doing this right, but I tried applying your fix but now I get the following error on the console whenever I visit a collection’s entry page:

Uncaught Error: Parser “js.view/script” not found.

Tried to fix it by issuing an npm install && npm run build inside the cockpit folder, but to no avail.

I guess this happened because I applied your patch before updating Cockpit itself to its latest version. Having done that, now the error has gone away. My custom class is now being applied, but somewhere in the hierarchy it’s being overwritten/cancelled.

Do you have a code example?

I tested it with a text field in a collection and my custum clas was applied to the input element. My npm command was npm run watch-components.

I had to apply a !important rule to the background-color property so to make it stick. I’m no expert in CSS matters, but without that rule the property was apparently being overwritten down the line.

.myaddon-readonly-field {
  background-color: #adf0c3 !important;

You should try to avoid important rules. If you ever decide to use another layer of css on top, these rules are a nightmare to be overwritten again.

This one works, too:

.uk-form input[type="text"].myaddon-readonly-field {
    background-color: #adf0c3;

See also: