hui-element: style is unstable

ildar170975 commented 1 year ago

My Home Assistant version: 2023.4.0

My lovelace configuration method (GUI or yaml): yaml/storage

What I am doing: I am trying to apply a style for hui-element card. Since this card does not have ha-card, it is placed into mod-card:

type: entities
entities:
  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: section
    card_mod:
      style:
        hui-element:
          $: |
            .divider {
              background-color: red !important;
            }

A correct output is:

Recently (probably after 2023.4) the style became unstable - in most cases it is not applied.

Why doing this test? I am using that code inside a decluttering-card to add a divider line inside stacks (like stack-in-card).

What I expected to happen: Style is always applied.

What happened instead: Style usually is not applied, but sometimes applied.

Minimal steps to reproduce: as above

Error messages from the browser console: none

By putting an X in the boxes ([]) below, I indicate that I:

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

ildar170975 commented 1 year ago

Same behaviour in Chrome+Win, iOS companion app:

In storage mode - style may BE, may BE NOT applied after F5 or refreshing a page.
In yaml mode - style IS applied after calling a "Refresh" menu (3dots menu on the top-right corner) and is NEVER applied after F5 or refreshing a page.

boardlord1 commented 1 year ago

I think my issue is connected to this.

I've used the Mini Graph Card custom card to displace temps in my rooms. I've also used card-mod to make the borders of these cards red if the heating is on in them. Before 2023.4, these worked beautifully.

Now with 2023.4 if the heating comes on, the red border often doesn't show up. Multiple page refreshes, cache clearings later I could usually make it appear, but not always.

Example:

My card-mod css code works for sure, as it used to work, and if I go into the edit the card dialogue (while on the main dashboard the red border isn't showing up), the preview shows the red border Example:

YAML code of the card:

square: false
columns: 2
type: grid
cards:
  - type: custom:mini-graph-card
    name: Living Room
    entities:
      - entity: sensor.average_mi_li_room_temperature
    line_color: blue
    card_mod:
      style: |
        ha-card {
          border:
            {%- set sensor = states('input_boolean.living_room_temp_vs_heating_set_point') %}
            {%- set sensor2 = states('binary_sensor.living_room_door_sensor_contact') %}
            {%- if sensor == off and sensor2 == 'off' %}
            {%- elif sensor == 'on' and sensor2 == 'off' %}solid 3px red
            {%- elif sensor == 'off' and sensor2 == 'on' %}solid 3px white
            {%- else %}
            {%- endif %} 
  - type: custom:mini-graph-card
    name: Bedroom
    entities:
      - entity: sensor.average_mi_bedroom_temperature
    line_color: dodgerblue
    card_mod:
      style: |
        ha-card {
          border:
            {%- set sensor = states('input_boolean.bedroom_temp_vs_heating_set_point') %}
            {%- set sensor2 = states('binary_sensor.bedroom_window_sensor_contact') %}
            {%- if sensor == off and sensor2 == 'off' %}
            {%- elif sensor == 'on' and sensor2 == 'off' %}solid 3px red
            {%- elif sensor == 'off' and sensor2 == 'on' %}solid 3px white
            {%- else %}
            {%- endif %}

But if I close the preview, nothing changes. If I change the code, save, change it back to how it was and save again, the red border shows up on the dashboard

The situation is the same with the Android companion, only after multiple force closes can I make the borders appear. After this it works for the next few changes, then I've reload/force close again to make it update the dashboard.

I've created an issue for the HA Frontend, but seems this is because of card-mod and Home Assistant 2023.4.x?

boardlord1 commented 1 year ago

I think the underlying issue is the same - card-mod styling is not showing up on the dashboard, regardless of what element you are styling

boardlord1 commented 1 year ago

Feels like duplicating, but ok...

As for border, I'll add "solid 1px var(--ha-card-border-color,var(--divider-color,#e0e0e0))"

ildar170975 commented 1 year ago

Could be duplicating, could be not. Now I see that MY code reproducing YOUR card works FLAWLESS. That is why I asked you several posts ago - "create separate issue" where we may discuss ways of improving your code. Now this thread is filled with irrelevant posts.

I gonna delete all my posts except this one, which I'll delete later.

DATAstrm commented 1 year ago

Just want to chime in that I'm also having issues where my layout will change slightly. The correct layout seems to always result when I update the Yaml of a view and click the refresh button that pops up on the bottom of the page. When I do a full page refresh, the layout is slightly different. It sounds similar to the issue here.

ildar170975 commented 1 year ago

@DATAstrm Is it with hui-element? If no - please create a separate issue. Please do not be like a person above.

DATAstrm commented 1 year ago

It's not. It happens with the mini-media player mod so I'm unable to determine whether it's this addon or that one.

And I have no real way of isolating the error further because it only seems to happen on my tablet/panel monitor. Just chiming in, hoping that the issues are related. Thanks.

On Mon, Apr 17, 2023 at 2:11 PM ildar170975 @.***> wrote:

@DATAstrm https://github.com/DATAstrm Is it with hui-element? If no - please create a separate issue.

— Reply to this email directly, view it on GitHub https://github.com/thomasloven/lovelace-card-mod/issues/276#issuecomment-1511943508, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXKJKP2K4BJRCRAIDCACMGLXBWIXDANCNFSM6AAAAAAW4O4FD4 . You are receiving this because you were mentioned.Message ID: @.***>

ildar170975 commented 1 year ago

And I have no real way of isolating the error further because it only seems to happen on my tablet/panel monitor.

When you create a separate issue - I will come and see if I can help.

ildar170975 commented 5 months ago

Starting from 3.4.0 it became worse. Both styles do not work in general:

type: entities
entities:
  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: section
    card_mod:
      style:
        hui-element:
          $: |
            .divider {
              background-color: red !important;
            }
  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: section
    card_mod:
      style:
        hui-element $: |
          .divider {
            background-color: red !important;
          }

The 2nd style works sometimes after F5; mainly this style works in HA Editor only. The 1st style - never works.

ildar170975 commented 5 months ago

In fact this issue is about the same as closed https://github.com/thomasloven/lovelace-card-mod/issues/177

thomasloven / lovelace-card-mod

hui-element: style is unstable #276