Setting custom CSS classes and styles on openhab widgets

Hi all,

I’m noticing that I can’t set custom styles or CSS classes on some widgets prefixed with “oh-”.

For example, I wanted to make a generic oh-cell expand into something the same width as the oh-slider-cell:

component: oh-cell
config:
  title: Keypad
  subtitle: Lighting Scenes
  icon: f7:rectangle_grid_2x2
  style:
    --f7-card-expandable-tablet-width: 400px
slots:
  default:
    - ...

However, looking at web inspector, my style variables don’t appear to be respected. For example, if I add something extreme like “display: none” even the widget still appears. Is this by design? E.g. components have to be specifically built to support the “style” and “class” properties? Or should I be able to style any component?

As it seems class and style are not implemented for oh-cell. You can open a github issue if you like this to be added.

I see—so support for class and style have to be implemented explicitly for each widget.
Poking around the source a bit, I think adding something like :class="config.class" :style="config.style" to the element tag in the vue file.

Is there any philosophy on offering these properties for some widget types and not others? I can take a stab at opening a PR to add class/style to all the cell variants. But as part of that effort maybe it would be worthwhile to bring the tablet width out as an explicit widget property too.

I’m not a main developer, but I think the philosophy is to generally enable the two properties class and style wherever possible. Actually, I wanted to check and add these where missing when I start working on another issue (about hinting these properties). But of course you can go ahead, PRs are always welcome.

As for “tablet width”: I don’t think it’s desired to have this mapped to a property. There are so many parameters in f7 and I think it’s hard to reason that this specific one gets a special treatment.

I noticed this is not working for oh-list-card either. Tried to set the --f7-list-in-list-padding-left variable to 0px, but couldn’t understand why it didn’t work, since I found many examples (and even in the documentation) that said this should be possible. After I found this thread and tried changing the component type to f7-card it immediately worked.

Is there an issue filed for this on the openhab-webui repo?