`Color` property isn't being applied to TWebPanel component in a TMS Web Core Website

Question

I have a TWebPanel component that has its Color property set to clTeal, but when I run the project then I don't see the Color property being applied.

Here's it in design-time with the correct Color being shown:

So you would expect that it would work in run-time since it's showing fine in design-time, but then during run-time in the browser, there isn't any background-color applied to the panel. The whole panel is just transparent with no color:

Answer 1

This took me a while to figure out, but basically for some reason if you add an ElementClassName to your component, then it ignores a bunch of properties and simply don't apply them.

So because I have a Bootstrap rounded class applied to my panel, it doesn't use the Color property.

---

This doesn't seem very intuitive. I would assume it would only choose the CSS from those classes.

As an example. The class I have added doesn't have any background-color applied to it. Therefore because it doesn't have a background-color applied to it, you would assume it would use the Color property on the panel rather.

But no. It doesn't work like this. As soon as you add a class name to it regardless of whether it has a background-color CSS applied to it or not, the Color property no longer works on the component.

---

Hopefully, this is fixed or improved in future versions of TMS Web Core, but in the meantime: You have to manually apply the CSS background-color property onto your panel via code instead of simply setting the Color property:

WebPanel1.ElementHandle.style.setProperty('background-color', 'teal');