Custom:button-card not follow up style at a if statement

Configuration Frontend
1

I’m trying to create a custom:buttoncard with custom fields and an if statement.
In de basic it is working fine.
Except that the text after the if statement is not using the style.
It is placing the text at right of the button except at the left
I now using a lot of minus signs to compensate that
The span after the else does working using the style
I tried to at style within the span brackets. All without succes.
What am I doing wrong?
The part of the custom fields out of the card code:


  custom_fields:
    tekst:
      - white-space: normal
      - word-wrap: break-word
      - align-self: flex-start
      - justify-self: flex-start
      - text-align: left
      - margin-left: 10px
      - margin-right: 6px
      - margin-top: 0px
      - margin-bottom: 12px
      - font-size: 12px
      - left: 3%
custom_fields:
  tekst: |

    [[[
      if (states["sensor.berichten"].attributes.bericht == "")
        return ` <span>
         ------------------------------------------ Geen berichten  -------------------------------------------
         </span>`
     else 
        return `
          <span> ${states['sensor.berichten'].attributes.bericht.replace(/\n/g, "<br>")} <br><br> ------------------------------------------------------------<br>- Klik om de berichten te verwijderen -</span>`
     ]]]
2

Here is an example that may help you

type: custom:button-card
entity: light.bathroom_lights
size: 5rem
styles:
  card:
   - height: 150px
  custom_fields:
    tekst:
      - position: absolute
      - left: 32%
      - top: 80%
      - padding: 10px
      - color: red
custom_fields:
  tekst: >
    [[[if (states['light.bathroom_lights'].state == 'off') return 
    states['sensor.sink_sensor_battery'].state +'%';
      else return '--- Geen berichten ---';
     ]]]

image
image1616×870 62.9 KB

None of this is necessary as you can control the position under styles:

3

Thanks for the answer.
It is a little better
except the box is not expanding automaticly anymore
image

image
image432×111 6.1 KB

The position is right because of “- position: absolute”, but is breaking the automatic expansion

type: custom:button-card
entity: input_button.berichten_reset
show_icon: false
show_name: false
tap_action:
  action: toggle
styles:
  card:
    - padding: 0%
    - min-height: 75px
    - min-width: 400px
    - display: flex
    - align-items: flex-start
    - flex-direction: column
    - justify-content: center
    - width: fit-content
    - height: fit-content
  custom_fields:
    tekst:
      - white-space: normal
      - word-wrap: break-word
      - position: absolute
      - text-align: left
      - margin-left: 10px
      - margin-right: 6px
      - margin-top: 0px
      - margin-bottom: 12px
      - font-size: 12px
custom_fields:
  tekst: >
    [[[if (states["sensor.berichten"].attributes.bericht != "") return 
    states['sensor.berichten'].attributes.bericht.replace(/\n/g, "<br>");
      else return '--- Geen berichten ---';
     ]]]

Without postion: absolute:

image
image417×102 1.38 KB

image
image507×246 19.7 KB

4

We should be able to adjust that via state styles.

5

Any idea how?

6

Yes, I’ll provide an example.

7

Thanks again!

8

Here is an example with state controlled styles. We can make adjustments as needed. It’s not clear to me exactly the design you are trying to achieve.

type: custom:button-card
entity: input_boolean.test
show_name: false
show_icon: false
show_state: false
aspect_ratio: 10/2
tap_action:
  action: toggle
custom_fields:
  tekst: >
    [[[if (states['input_boolean.test'].state == 'on') return 
    states['sensor.sink_sensor_battery'].state + '%';
      else return '--- Geen berichten ---';
     ]]]
state:
  - value: "off"
    styles:
      card:
        - background: red
      custom_fields:
        tekst:
          - position: absolute
          - left: 8%
          - font-weight: 700
          - font-size: 40px
  - value: "on"
    styles:
      card:
        - background: green
      custom_fields:
        tekst:
          - position: absolute
          - left: 45%
          - font-weight: 700
          - font-size: 40px
9

Thanks for the example.
I only want all text lined out left
undependend the if state

I will try this tonight after work

10

I tried everything also using chatgpt but realy nothing is working. I start thinking it is a bug in the custom:button-card

EDIT:
I did found a solution:
<div style="position: absolute; left: 2%">
did the trick

custom_fields:
  tekst: |
    [[[
      if (states["sensor.berichten"].attributes.bericht == "") {
        return '<div style="position: absolute; left: 2%">----- Geen berichten -----</div>';
      } else {
        return  states['sensor.berichten'].attributes.bericht.replace(/\n/g, "<br>") +
          '<br><br> ------------------------------------------------------------<br>- Klik om de berichten te verwijderen -</div>';
      }
    ]]]

Thanks for the effort to help