lovelace-template-entity-row icon indicating copy to clipboard operation
lovelace-template-entity-row copied to clipboard

Rendering issues with HA 2025.11

Open ChrisJ60 opened this issue 5 months ago • 22 comments

Since updating to HA 2025.11 (from 2025.10.4) cards using the template-entity-row are displaying large areas of blank space, presumably where entities that are hidden due to a false 'condition'. This did not happen on earlier HA releases. is this a HA issue or a template-entity-row issue?

Any idea how this can be fixed?

Here is an example card:

type: entities
entities:
  - type: divider
  - type: custom:template-entity-row
    entity: sensor.central_heating_utilisation
    name: Current utilisation
    state: >-
      {{ (states['sensor.central_heating_utilisation'].state | int | string )  +
      state_attr('sensor.central_heating_utilisation','unit_of_measurement') }}
    secondary: >-
      {{
      relative_time(states['sensor.central_heating_utilisation'].last_updated)
      }}
    color: >-
      {% if states('sensor.central_heating_utilisation') | int > 0 %} orange {%
      endif %}
    condition: true
  - type: custom:template-entity-row
    entity: sensor.central_heating_gas_power
    name: Current total power
    state: >-
      {{ '{:.1f}'.format((states['sensor.central_heating_gas_power'].state |
      float)) + ' ' +
      state_attr('sensor.central_heating_gas_power','unit_of_measurement') }}
    secondary: >-
      {{ relative_time(states['sensor.central_heating_gas_power'].last_updated)
      }}
    color: >-
      {% if states('sensor.central_heating_gas_power') | float > 0.0 %} orange
      {% endif %}
    condition: true
  - type: custom:template-entity-row
    entity: sensor.back_room_heating_calibrated
    name: Back room heating
    secondary: >-
      {{
      relative_time(states['sensor.back_room_heating_calibrated'].last_updated)
      }}
    state: >-
      {{ (states['sensor.back_room_heating_calibrated'].state | round(0) |
      string )  +
      state_attr('sensor.back_room_heating_calibrated','unit_of_measurement') }}
    color: >-
      {% if states('sensor.back_room_heating_calibrated') | round(0) > 0 %}
      orange {% endif %}
    condition: >-
      {% if ( states('sensor.back_room_heating_calibrated') | round(0))  > 0 %}
      true {% else %} false {% endif %}
  - type: custom:template-entity-row
    entity: sensor.bathroom_heating_calibrated
    name: Bathroom heating
    secondary: >-
      {{
      relative_time(states['sensor.bathroom_heating_calibrated'].last_updated)
      }}
    state: >-
      {{ (states['sensor.bathroom_heating_calibrated'].state | round(0) | string
      )  +
      state_attr('sensor.bathroom_heating_calibrated','unit_of_measurement') }}
    color: >-
      {% if states('sensor.bathroom_heating_calibrated') | round(0) > 0 %}
      orange {% endif %}
    condition: >-
      {% if states('sensor.bathroom_heating_calibrated') | round(0) > 0 %} true
      {% else %} false {% endif %}
  - type: custom:template-entity-row
    entity: sensor.bedroom_heating_calibrated
    name: Bedroom heating
    secondary: >-
      {{ relative_time(states['sensor.bedroom_heating_calibrated'].last_updated)
      }}
    state: >-
      {{ (states['sensor.bedroom_heating_calibrated'].state | round(0) | string
      )  + state_attr('sensor.bedroom_heating_calibrated','unit_of_measurement')
      }}
    color: >-
      {% if states('sensor.bedroom_heating_calibrated') | round(0) > 0 %} orange
      {% endif %}
    condition: >-
      {% if states('sensor.bedroom_heating_calibrated') | round(0) > 0 %} true
      {% else %} false {% endif %}
  - type: custom:template-entity-row
    entity: sensor.bethany_heating_calibrated
    name: Bethany heating
    secondary: >-
      {{ relative_time(states['sensor.bethany_heating_calibrated'].last_updated)
      }}
    state: >-
      {{ (states['sensor.bethany_heating_calibrated'].state | round(0) | string
      )  + state_attr('sensor.bethany_heating_calibrated','unit_of_measurement')
      }}
    color: >-
      {% if states('sensor.bethany_heating_calibrated') | round(0) > 0 %} orange
      {% endif %}
    condition: >-
      {% if states('sensor.bethany_heating_calibrated') | round(0) > 0 %} true
      {% else %} false {% endif %}
  - type: custom:template-entity-row
    entity: sensor.emrys_heating_calibrated
    name: Emrys heating
    secondary: >-
      {{ relative_time(states['sensor.emrys_heating_calibrated'].last_updated)
      }}
    state: >-
      {{ (states['sensor.emrys_heating_calibrated'].state | round(0) | string ) 
      + state_attr('sensor.emrys_heating_calibrated','unit_of_measurement') }}
    color: >-
      {% if states('sensor.emrys_heating_calibrated') | round(0) > 0 %} orange
      {% endif %}
    condition: >-
      {% if states('sensor.emrys_heating_calibrated') | round(0) > 0 %} true {%
      else %} false {% endif %}
  - type: custom:template-entity-row
    entity: sensor.ensuite_heating_calibrated
    name: Ensuite heating
    secondary: >-
      {{ relative_time(states['sensor.ensuite_heating_calibrated'].last_updated)
      }}
    state: >-
      {{ (states['sensor.ensuite_heating_calibrated'].state | round(0) | string
      )  + state_attr('sensor.ensuite_heating_calibrated','unit_of_measurement')
      }}
    color: >-
      {% if states('sensor.ensuite_heating_calibrated') | round(0) > 0 %} orange
      {% endif %}
    condition: >-
      {% if states('sensor.ensuite_heating_calibrated') | round(0) > 0 %} true
      {% else %} false {% endif %}
  - type: custom:template-entity-row
    entity: sensor.hall_heating_calibrated
    name: Hall heating
    secondary: "{{ relative_time(states['sensor.hall_heating_calibrated'].last_updated) }}"
    state: >-
      {{ (states['sensor.hall_heating_calibrated'].state | round(0) | string ) 
      + state_attr('sensor.hall_heating_calibrated','unit_of_measurement') }}
    color: >-
      {% if states('sensor.hall_heating_calibrated') | round(0) > 0 %} orange {%
      endif %}
    condition: >-
      {% if ( states('sensor.hall_heating_calibrated') | round(0) ) > 0 %} true
      {% else %} false {% endif %}
  - type: custom:template-entity-row
    entity: sensor.kitchen_heating_calibrated
    name: Kitchen heating
    secondary: >-
      {{ relative_time(states['sensor.kitchen_heating_calibrated'].last_updated)
      }}
    state: >-
      {{ (states['sensor.kitchen_heating_calibrated'].state | round(0) | string
      )  + state_attr('sensor.kitchen_heating_calibrated','unit_of_measurement')
      }}
    color: >-
      {% if states('sensor.kitchen_heating_calibrated') | round(0) > 0 %} orange
      {% endif %}
    condition: >-
      {% if states('sensor.kitchen_heating_calibrated') | round(0) > 0 %} true
      {% else %} false {% endif %}
  - type: custom:template-entity-row
    entity: sensor.living_room_heating_calibrated
    name: Living room heating
    secondary: >-
      {{
      relative_time(states['sensor.living_room_heating_calibrated'].last_updated)
      }}
    state: >-
      {{ (states['sensor.living_room_heating_calibrated'].state | round(0) |
      string )  +
      state_attr('sensor.living_room_heating_calibrated','unit_of_measurement')
      }}
    color: >-
      {% if states('sensor.living_room_heating_calibrated') | round(0) > 0 %}
      orange {% endif %}
    condition: >-
      {% if states('sensor.living_room_heating_calibrated') | round(0) > 0 %}
      true {% else %} false {% endif %}
  - type: custom:template-entity-row
    entity: sensor.middle_room_heating_calibrated
    name: Middle room heating
    secondary: >-
      {{
      relative_time(states['sensor.middle_room_heating_calibrated'].last_updated)
      }}
    state: >-
      {{ (states['sensor.middle_room_heating_calibrated'].state | round(0) |
      string )  +
      state_attr('sensor.middle_room_heating_calibrated','unit_of_measurement')
      }}
    color: >-
      {% if states('sensor.middle_room_heating_calibrated') | round(0) > 0 %}
      orange {% endif %}
    condition: >-
      {% if states('sensor.middle_room_heating_calibrated') | round(0) > 0 %}
      true {% else %} false {% endif %}
  - type: custom:template-entity-row
    entity: sensor.office_heating_calibrated
    name: Office heating
    secondary: >-
      {{ relative_time(states['sensor.office_heating_calibrated'].last_updated)
      }}
    state: >-
      {{ (states['sensor.office_heating_calibrated'].state | round(0) | string
      )  + state_attr('sensor.office_heating_calibrated','unit_of_measurement')
      }}
    color: >-
      {% if states('sensor.office_heating_calibrated') | round(0) > 0 %} orange
      {% endif %}
    condition: >-
      {% if states('sensor.office_heating_calibrated') | round(0) > 0 %} true {%
      else %} false {% endif %}
title: Central Heating
show_header_toggle: false

And here is how it looks under HA 2025.11

Image

ChrisJ60 avatar Nov 17 '25 09:11 ChrisJ60

first: please reduce that config a bit, so we only see the minimal breaking config.

next,can you remove the condition: true which would make the row show, even when it shouldn't?

also these:

   condition: >-
      {% if ( states('sensor.back_room_heating_calibrated') | round(0))  > 0 %}
      true {% else %} false {% endif %}

can be written as:

   condition: >-
      {{states('sensor.back_room_heating_calibrated') | round(0))  > 0 }}

and makes sure those dont cause trouble

testing with a straight UI example shows no issue here'll rows have the same height:

Image

there does seem to be some extra margin/padding when using the condition:false, comparing it directly to a straight entities card with the same entities without fold-entity-row.

cant say if that wasn't there before, maybe its the generic-entity-row change that was done in 2025.11

dcapslock might be able to tell, as he is the author of that change

Mariusthvdb avatar Nov 21 '25 08:11 Mariusthvdb

@Mariusthvdb @dcapslock Sadly the issue is definitely new in 2025.11 and does seem to be related to the extra margin/padding for entries where the condition evaluates as false.

Here is a much simplified example which clearly shows this. First the YAML:

type: entities
entities:
  - type: divider
  - type: custom:template-entity-row
    entity: sensor.back_room_heating_calibrated
    name: Back room heating
    state: >-
      {{ states['sensor.back_room_heating_calibrated'].state | round(0) | string
      }}
    condition: true
  - type: custom:template-entity-row
    entity: sensor.bathroom_heating_calibrated
    name: Bathroom heating
    state: >-
      {{ states['sensor.bathroom_heating_calibrated'].state | round(0) | string
      }}
    condition: true
  - type: custom:template-entity-row
    entity: sensor.bedroom_heating_calibrated
    name: Bedroom heating
    state: >-
      {{ states['sensor.bedroom_heating_calibrated'].state | round(0) | string
      }}
    condition: true
  - type: custom:template-entity-row
    entity: sensor.bethany_heating_calibrated
    name: Bethany heating
    state: >-
      {{ states['sensor.bethany_heating_calibrated'].state | round(0) | string
      }}
    condition: true
  - type: custom:template-entity-row
    entity: sensor.emrys_heating_calibrated
    name: Emrys heating
    state: >-
      {{ states['sensor.emrys_heating_calibrated'].state | round(0) | string  
      }}
    condition: true
  - type: custom:template-entity-row
    entity: sensor.middle_room_heating_calibrated
    name: Middle room heating
    state: >-
      {{ states['sensor.middle_room_heating_calibrated'].state | round(0) |
      string      }}
    condition: true
title: Central Heating
show_header_toggle: false

In this example I am using hard coded condition values (true/false) but the behaviour is the same when the values are computed.

The issue is always present but only becomes noticeable if there are multiple rows which evaluate as 'false' one after another. In such cases the extra padding accumulates and becomes visually, well, terrible. Here are some screenshots with different rows set to true / false.

All rows set to true:

Image

Looks fine and just as it did in 2024.x and earlier.

Middle two rows set to false:

Image

Hmm, not so nice.

Middle 4 rows set to false:

Image

Ick!

All rows set to false (just as a data point):

Image

Sadly (for me) I use this kind of construct in many places and now in 2025.x my dashboards often look pretty poor.

@dcapslock It would be great if this could be reverted to how it behaved in 2024 (or fixed in some other way).

ChrisJ60 avatar Nov 21 '25 10:11 ChrisJ60

might not be directly what you want, but you can prevent that row gap with a type: conditional, taking the logic out of the t-e-r to the entities card itself

  - type: conditional
    conditions:
      - entity: input_boolean.test
        state: 'on'
    row:
      type: custom:template-entity-row
      entity: sensor.home_assistant_operating_system_versie

at least for the time being

btw I did briefly check the theme var we can set with

#     card-row-gap: 0px
    entities-card-row-gap: 0px

but that causes more problems than it solves...

Mariusthvdb avatar Nov 21 '25 10:11 Mariusthvdb

The issue is that the div created by entities card to hold the row is not getting hidden as rows now need to fire an event to the entities card when they are shown/hidden, and entities card then manages the hidden state of that div. Without this it means that the 2025.11 layout includes 8px gap for each hidden template row, as the containing div is not hidden, even though empty. I expect that I can provide card_mod workaround first if you use card_mod, and then update template-entity-row with how it needs to behave as a row that can show/hide itself.

To note, there is an upcoming web standard to allow for layouts with gap to auto collapse empty, but not hidden, elements like in this case. When that gets adopted and browsers support it, layout gaps like this will be much easier to manage.

dcapslock avatar Nov 21 '25 11:11 dcapslock

@Mariusthvdb Thanks for the tip. Sadly adopting that solution will involve a great deal of editing across many dashboards ☹️ I won't rush into that yet in the hope a simpler fix may become available. Good to know there is a way to solve it though.

ChrisJ60 avatar Nov 21 '25 11:11 ChrisJ60

sure, there is a downside to type: conditional though, and that is it doesnt accept templates.... (that would be huge btw, and probably never done in core... awaiting a custom plugin there ;-) )

So I understand you would rather await a possible update for the rows you require that.

for other rows, I'd not hesitate and move the logic to the stock entities card, as that should be 100% supported in core, and never fail

Mariusthvdb avatar Nov 21 '25 11:11 Mariusthvdb

@dcapslock Thanks for the detail; seems just reverting it is not feasible. I don't currently use card-mod so that would be quite a learning curve for me. Did I understand you correctly that even without card-mod you will be able to fix this in template-entity-row at some point? or do I need to learn how to use card-mod anyway to get any kind of workaround?

ChrisJ60 avatar Nov 21 '25 11:11 ChrisJ60

Yes. Fixable in this card.

dcapslock avatar Nov 21 '25 11:11 dcapslock

@dcapslock

Yes. Fixable in this card.

Fantastic. I will live with this for now and await the fix when you are able to schedule it. Many thanks!

ChrisJ60 avatar Nov 21 '25 11:11 ChrisJ60

Taking a closer look now. Recording a current condition with layout highlighted so you can see that the space is due to gaps which is what I expected so will be a straightforward fix.

Image

dcapslock avatar Nov 22 '25 00:11 dcapslock

Making progress...

https://github.com/user-attachments/assets/6204ada7-55a3-41af-868b-f51ded0bb427

dcapslock avatar Nov 22 '25 02:11 dcapslock

Fixed by PR #139

Build v1.4.1-dcapslock.1 on my fork as a pre-release. https://github.com/dcapslock/lovelace-template-entity-row/releases/tag/v1.4.1-dcapslock.1. Either grab the release js from the branch or you can add https://github.com/dcapslock/lovelace-template-entity-row as a custom HACS repository and download v1.14.1-dcapslock.1 via selecting another release. This is a release method I used so you don't need to wait for the main release. From what I see I will likely do some more PRs and release more builds soon.

You can confirm you are running this build via console

TEMPLATE-ENTITY-ROW 1.4.1-dcapslock.1 IS INSTALLED 

EDIT: Just realised that if condition is false on page load the event does not fire. I will need to fix and update the PR and build.

dcapslock avatar Nov 22 '25 02:11 dcapslock

UPDATE: Now Build v.1.4.1-dcapslock.2. https://github.com/dcapslock/lovelace-template-entity-row/releases/tag/v1.4.1-dcapslock.2. Either grab the release js from the branch or you can add https://github.com/dcapslock/lovelace-template-entity-row as a custom HACS repository and download v1.14.1-dcapslock.1 via selecting another release. This is a release method I used so you don't need to wait for the main release. From what I see I will likely do some more PRs and release more builds soon.

You can confirm you are running this build via console

TEMPLATE-ENTITY-ROW 1.4.1-dcapslock.1 IS INSTALLED 

dcapslock avatar Nov 22 '25 07:11 dcapslock

@dcapslock Can you please advise what exactly you mean by 'the console'. I run HA in a docker container. I installed the code (.2) directly rather than via HACS and restarted HA but the container logs do not contain the string 'TEMPLATE-ENTITY-ROW'.

If I am running the correct code then it doesn't seem to make any difference visually. The extra spacing is still present (I cleared browser caches).

ChrisJ60 avatar Nov 22 '25 07:11 ChrisJ60

Browser console is where you can check the version running. Use Browser developer tools.

dcapslock avatar Nov 22 '25 08:11 dcapslock

@dcapslock Ah okay. I see the string there but in Safari it seems I have to fully nuke the browser cache; the 'Clear Caches' entry in the Develop menu is insufficient. It is now loading the '.2' code and the errant spacing has disappeared. This is great! Many thanks.

ChrisJ60 avatar Nov 22 '25 08:11 ChrisJ60

can confirm the 2a version to fix the rows when hidden. to the left a config with many rows set with condition: false, to the right an all straight entities card

Image
    active: >
      {{is_state(config.entity,'on')}}

is back to being functional too, which is fantastic! Although.... it now also colors without anything set, not even the new state_color: true

I can prevent it from coloring state with state_color: false however ;) so for me, that is perfect.

even works wonders inside an auto-entities

filter:
  include:
    - domain: automation
      state: 'on'
      last_triggered: '<= 20'
      options:
        type: custom:template-entity-row
#         card_mod:
#           style: |
#             :host {
#               --card-mod-icon-color:
#                 {{'var(--active-color)' if is_state(config.entity,'on')}};
#               }
        # active is also lost since forever.... and now fixed, but no longer required ;-)
#         active: >
#           {{is_state(config.entity,'on')}}
#         state_color: false
        toggle: true

Mariusthvdb avatar Nov 22 '25 08:11 Mariusthvdb

@ChrisJ60 just in case you are wondering, @Mariusthvdb has a special 2a build where I am working on the color fixes. It will be a .3 build some time tomorrow with a new PR for those fixes.

dcapslock avatar Nov 22 '25 09:11 dcapslock

@dcapslock Thanks for the heads-up. I haven't noticed any colour issues so far fortunately. I'll grab the .3 build once it is available.

ChrisJ60 avatar Nov 22 '25 10:11 ChrisJ60

btw, did I mention how great it is we can ditch the card_mod

         card_mod:
           style: |
             :host {
               --card-mod-icon-color:
                 {{'var(--active-color)' if is_state(config.entity,'on')}};
               }

and use the color option back again:

color: >
   {{'var(--active-color)' if is_state(config.entity,'on')}}

thanks @dcapslock for fixing that!

Mariusthvdb avatar Nov 22 '25 22:11 Mariusthvdb

v1.4.1-dcapslock.3 now available which now includes the active/color/state_color PR as well as actions PR which fixes double_tap_action and will hide pointer if no actions defined (need to override tap_action to none if entity set).

dcapslock avatar Nov 23 '25 05:11 dcapslock

this is amazing really, its better than ever now, and all of the issues are fixed. Super release this is

Mariusthvdb avatar Nov 23 '25 11:11 Mariusthvdb