Custom CSS for .wrapperStyle

#1

Using doo.model.field.setStyle() I would like to set the same appearance for the form field as the infotext box. I use the following code which works:

const style: IDooFieldStyle = {};
style.wrapperStyle = {border: '4px solid var(--border-brand)', background: "#57c7d41a"};
style.labelStyle = {color: "var(--border-brand)"};
doo.model.nazev.setStyle(style);
doo.model.infotext = `Neověřený klient, uvedený název je převzatý ze zdrojového CRM systému ${crm}!`;

But the infotext box has a colored border only on the left side, so to achieve the same appearance I would need this:

style.wrapperStyle = {border-left: '4px solid var(--border-brand)', background: "#57c7d41a"};

But when I using the CSS property border-left, an error occurs.
Can only some CSS properties be used for .wrapperStyle? Is this intentional?

Thanks…
Kuba

#2

Hi Kuba,
border-left doesn’t work in wrapperStyle because JavaScript (and Tabidoo styling) requires camelCase property names. Try using borderLeft instead:

style.wrapperStyle = {
  borderLeft: '4px solid var(--border-brand)',
  background: '#57c7d41a'
};

I recommend always using camelCase for style properties like borderLeft, backgroundColor, marginTop, etc. Otherwise, Tabidoo might throw an error or ignore the style.