[Enhancement]: JINJA Should accept more STYLE tags

[emartoni]

Requirements

• I checked the README.
• I have updated entity-progress-card to the latest available version.
• I did a search to see if there is a similar issue.

What would you like to improve?

In the previous version of the card, JINJA accepted more style tags than just color and background-color, which was beneficial because it gave us more flexibility.

Why is this improvement helpful?

It would be possible to change the font size and also create an HTML structure to handle multiple variables.

Describe alternatives you've considered

No response

Additional context

name: |-
  {% set raw = states(entity) %}
    <span style="
      display:inline-block;
      width:40%;
      text-align:left;
      font-weight:normal;
    ">Processador</span>
    <span style="
      display:inline-block;
      width:58%;
      text-align:right;
      font-weight:normal;
    ">{{ raw | float(0) | round(0) }}%</span>

[francois-le-ko4la]

Hi @emartoni,

Good news — this is planned. The style allowlist for Jinja-rendered name/secondary/custom_info fields will grow from color/background-color to also include font-size, font-weight, text-align, width, display, position and z-index. <span>/<div> were already allowed, so your two-column layout example should work as-is once this ships.

I'm planning a new RC today that will include this. I'll ping you here once it's out so you can try it.

Thanks for the detailed example!

[emartoni]

Hi @emartoni,

Good news — this is planned. The style allowlist for Jinja-rendered name/secondary/custom_info fields will grow from color/background-color to also include font-size, font-weight, text-align, width, display, position and z-index. <span>/<div> were already allowed, so your two-column layout example should work as-is once this ships.

I'm planning a new RC today that will include this. I'll ping you here once it's out so you can try it.

Thanks for the detailed example!

Awesome!
I'm looking forward to testing this new RC version.
Thanks a lot @francois-le-ko4la

[francois-le-ko4la]

Hi @emartoni,

1.6.1-rc1 is out with the expanded style allowlist (font-size, font-weight, text-align, width, display, position, z-index) — your two-column name layout should render as-is now.

• Release: https://github.com/francois-le-ko4la/lovelace-entity-progress-card/releases/tag/1.6.1-rc1
• Safe testing guide: https://github.com/francois-le-ko4la/lovelace-entity-progress-card/blob/main/docs/rc-testing.md

Let me know if it renders the way you expected!

[emartoni]

Awesome!
It worked like a charm—at least with what I have—but it looks like the card isn’t respecting the frameless and borderless options.
Or am I mistaken? Is this padding expected?

[francois-le-ko4la]

Can you share your yaml ?

TY.

[emartoni]

For sure!
It's inside a button-card as a custom field, so I'm taking advantage of the variables.
Let me know if you need the full YAML.
Should I open a new issue, or should we continue using this one?

  type: custom:entity-progress-card
  entity: "[[[ return variables.entity ]]]"
  hide:
    - icon
    - name
    - value
    - secondary_info
  disable_unit: true
  frameless: true
  marginless: true
  bar_size: medium
  bar_effect:
    - shimmer
  custom_theme:
    - min: 0
      max: 50
      color: |
        [[[
          return entity.attributes.color;
        ]]]
    - min: 50
      max: 80
      color: |
        [[[
          return entity.attributes.color;
        ]]]
    - min: 80
      max: 120
      color: |
        [[[
          return entity.attributes.color;
        ]]]

[emartoni]

Ok! No worries!
I can handle it using the height attribute.

[francois-le-ko4la]

Hi @emartoni,

Following up on the padding question from your button-card custom field: 1.6.1-rc2 is out with a fix for that. Hiding name/secondary_info on a horizontal card used to leave an empty gap where the hidden row was, instead of shrinking the card — your hide: [icon, name, value, secondary_info] + frameless: true + marginless: true combo hit exactly this. It should now shrink properly without needing the height workaround.

• Release: https://github.com/francois-le-ko4la/lovelace-entity-progress-card/releases/tag/1.6.1-rc2
• Safe testing guide (HACS pre-release, or a side-by-side manual install): https://github.com/francois-le-ko4la/lovelace-entity-progress-card/blob/main/docs/rc-testing.md

Would appreciate it if you could try it in your button-card setup and confirm the padding is gone now. Thanks again for the detailed YAML — it made this easy to reproduce.

[emartoni]

Hi @francois-le-ko4la !

It worked as expected now, but I might have found another issue.
The progress bar isn't rendering as "full", even though the sensor is returning 100%.

Just to give more context, my custom sensor (template) is returning:

state: 100.0
attributes:
unit_of_measurement: "%"
friendly_name: Qualidade da Internet (Limitada)

I also tried explicitly specifying the progress-bar unit as "%", but the bar still isn't rendering as 100%.
Let me know if you need anything else to reproduce the issue.