How to make text use the full width for this custom:button-card

May-23-2022 10-54-56

Above marquee is in yaml:

type: custom:button-card
template: button_default_title
styles:
  card:
    - padding-right: 5px
name: >
  [[[ var phrase = states['sensor.alerts_notifying'].state == 1
                   ? 'Alert active:' : 'Alerts:';
      return `<div style='display: flex';>
      <div>${states['sensor.alerts_notifying'].state} ${phrase}&nbsp</div>
      <marquee>
      <span style='align-items: center;font-weight: 400;font-size:20px;
      /*color: var(--alert-color)*/;'>
      ${states['sensor.marquee_alerts'].attributes.marquee}&nbsp</span>
      </marquee>`; ]]]

the used template sets things like:

button_default_title:
#  aspect_ratio: 12/1
  tap_action:
    action: none
  styles:
    card:
      - background-color: var(--background-color-off)
      - color: var(--text-color-off)
      - font-size: 20px #24px
      - font-weight: 400 #300
      #- letter-spacing: 0px
#      - font-weight: bold
      - padding: 12px
    name:
      - justify-self: left

Id love to have the Marquee start scrolling in from the right side border, and not half way.

When the Marquee text is longer, eg when 2 alerts are on, the text scrolls in fine and uses the whole card.

Would anyone have a suggestion how to make that happen with single alert marquees…?

Ofc I did try the various justify-self options, but all I can change there is the left-side text… and even the stretch doesnt really help, because then the text gets centered and not left aligned either.

you need to adjust the width of the span inside it’s container by playing with the css. Google topics like: LMGTFY - Let Me Google That For You

thanks Petro, and, yes, I have been experimenting in adjusting the width, and even tried the width: 100% which is also mentioned in several of these links… nothing changes though.

It seems the only thing affecting position at the right marquee entry is the length of the string of the marquee. other than that I havent been able to find a setting influencing it. Unless I change the width of the card column completely, but that is not what Wel;re after here, it should remain its default width like all cards.

Ive taken out the button_card_template and wrote all css in this card_config, to be sure no conflicts exist between the various stylings:

type: custom:button-card
#template: button_default_title
tap_action:
  action: none
styles:
  card:
    - background-color: var(--background-color-off)
    - color: var(--text-color-off)
    - font-size: 20px
    - font-weight: 400
    - padding: 12px
  name:
    - justify-self: stretch
name: >
  [[[ var phrase = states['sensor.alerts_notifying'].state == 1
                   ? 'Alert active:' : 'Alerts:';
      return `<div style='display: flex';>
      <div>${states['sensor.alerts_notifying'].state} ${phrase}&nbsp</div>
      <marquee>
      <span style='align-items: center;'>
      ${states['sensor.marquee_alerts'].attributes.marquee}&nbsp</span>
      </marquee>`; ]]]

Notice I now use the stretch option, to make the name use the full width…nothing happening

But you aren’t expanding the span. The name is the grid container. The span is what does the text.

ok…
ive brought some stylings to the card settings, hoping it would attach that to the whole name: also simplified the html a bit because of that. and it is way better, but now the first div is lowered and no longer center aligned, nor is the padding setting of 12px respected…

Ive tried to end the div after the too make it a larger section, but again, that doest really change anything:

May-23-2022 13-29-58

styles:
  card:
    - background-color: var(--background-color-off)
    - color: var(--text-color-off)
    - font-size: 20px
    - font-weight: 400
    - padding: 12px
  name:
    - justify-self: stretch
    - align-items: center
name: >
  [[[ var phrase = states['sensor.alerts_notifying'].state == 1
                   ? 'Alert active:' : 'Alerts:';
      return `<div >
      <div>${states['sensor.alerts_notifying'].state} ${phrase}&nbsp
      <marquee></div>
      <span >
      ${states['sensor.marquee_alerts'].attributes.marquee}&nbsp</span>
      </marquee>`; ]]]

Yep, play around until it works. Without being able to change the backend, that’s what you have to do. In normal circumstances you’d change the underlying classes. Everything in custom button card is a work around with trail and error.

hmmm… I will, and am. but its not very obvious really. even a bare config like:

styles:
  card:
    - background-color: var(--background-color-off)
    - color: var(--text-color-off)
    - font-size: 20px
    - font-weight: 400
    - padding: 12px
  name:
    - justify-self: stretch
name: >
  [[[ var phrase = states['sensor.alerts_notifying'].state == 1
                   ? 'Alert active: ' : 'Alerts: ';
      return ` ${phrase}
      <marquee> Test </marquee>`; ]]]

still shows the oddly placed phrase off center. If I take out the phrase the Marquee remains centered and uses the full width.

May-23-2022 14-45-50

cleaned the name template a bit more, to keeps thing tidy and simple:

type: custom:button-card
variables:
  phrase: >
    [[[ return (states['sensor.alerts_notifying'].state == 1) ? 'Alert:&nbsp' : 'Alerts:&nbsp'; ]]]
  count: >
    [[[ return states['sensor.alerts_notifying'].state ]]]
tap_action:
  action: none
styles:
  card:
    - background-color: var(--background-color-off)
    - color: var(--text-color-off)
    - font-size: 20px
    - font-weight: 400
    - padding: 12px
  name:
    - justify-self: stretch
name: >
  [[[ return `<div style='display: flex';>
      <div>${variables.count} ${variables.phrase}</div>
      <marquee>${states['sensor.marquee_alerts'].attributes.marquee}</marquee>`; ]]]

and we’re back to the halfway marquee… this is so infuriating.
Either I have a Marquee that starts halfway, or I have 2 sections non aligned…

1 Like

Lo and behold, Ive finally made it… pure excitement made me color the marquee red independently. Just to indicate how ugly this process felt…

type: custom:button-card
variables:
  phrase: >
    [[[ return (states['sensor.alerts_notifying'].state == 1) ? 'Alert:&nbsp' : 'Alerts:&nbsp'; ]]]
  count: >
    [[[ return states['sensor.alerts_notifying'].state ]]]
tap_action:
  action: none
styles:
  card:
    - background-color: var(--background-color-off)
    - color: var(--text-color-off)
    - font-size: 20px
    - font-weight: 400
    - padding: 12px
  name:
    - justify-self: stretch
name: >
  [[[ return `<div style='display: flex';>
      <div>${variables.count} ${variables.phrase}</div>
      <span style='color:red;width:100%;'>
      <marquee>${states['sensor.marquee_alerts'].attributes.marquee}</marquee></span>`; ]]]

May-23-2022 15-41-22

Which in hindsight is what Petro said here

2 Likes

hello.
really like this where the text is moving. i would like to make a list of all the lights which are on. how could i do that? here is the code i have to find out which lights are on, but i would like to have then sliding in one row like you did,.

type: entity-filter
title: lights and switches currently on
show_header_toggle: false
entities:
  - light.play_room_light
  - light.play_room_spots
  - light.liam_light
  - light.liam_spot
  - light.all_lightscolor_stripe
  - light.eden_light
  - light.eden_spots
  - light.giraffe
  - light.kids_bath
  - light.laundry
  - light.bath_mirror
  - light.bath_shower
  - light.entrance
  - light.bed
  - light.daniel
  - light.gil
  - light.spots_bed_room
  - light.dressing
state_filter:
  - 'on'
  - open
show_empty: false
card:
  type: glance
  title: lights and switches currently on

you have to make a template sensor with the entities in a list as state, and then add that sensor in the Marquee code as I provided above

but tbh, I dont think that would be very adequate, as it might be a very long list, and the marquee hardly would be the best tool for that.

Why not use a plain Markdown card if you want a list to be displayed.

thanks,
I dont want it in a list, i want it in one row scrolling.
what will be the best for that?

as I wrote above. first line of my reply

hello.
i manage to do it with if statement. but i dont know how to add another if statments,

here is the code with one if:

type: custom:button-card
variables:
  phrase: |
    [[[     if (states['light.all_liam'].state =='on')
        return 'Liam,' 
        else 
        return '' ]]]
tap_action:
  action: none
styles:
  card:
    - background-color: var(--background-color-off)
    - color: var(--text-color-off)
    - font-size: 20px
    - font-weight: 400
    - padding: 12px
  name:
    - justify-self: stretch
name: |
  [[[ return `<div style='display: flex';>
      <div>Lights on:    </div>
      <marquee>${variables.phrase}</marquee>`; ]]]


and this is what i want to do

type: custom:button-card
variables:
  phrase: |
    [[[     if (states['light.all_liam'].state =='on')
        return 'Liam,' 
        else 
        return '' + 
      if (states['light.all_play_room'].state =='on')
        return 'Play Room,' 
        else 
        return '' + 
     if (states['light.all_eden'].state =='on')
        return 'Eden,' 
        else 
        return '' +
     if (states['light.all_kids_bath'].state =='on')
        return 'Kids Bath,' 
        else 
        return '' +
    if (states['light.all_bed_room'].state =='on')
        return 'Bed Room,' 
        else 
        return '']]]
tap_action:
  action: none
styles:
  card:
    - background-color: var(--background-color-off)
    - color: var(--text-color-off)
    - font-size: 20px
    - font-weight: 400
    - padding: 12px
  name:
    - justify-self: stretch
name: |
  [[[ return `<div style='display: flex';>
      <div>Lights on:    </div>
      <marquee>${variables.phrase}</marquee>`; ]]]

as I suggested, create a template sensor with the list of names of the lights that are on, and then use that template sensor in the marquee.

{{ states.light | selectattr('state', 'eq', 'on') |map(attribute='name')| list  }}

or set this as variable, also possible.

Ok. I will try that when I’m home.

But out of Curiosity, how do I add another if statement. (Just the results should be after the other) with a + or & ?

Not if A and B then.

Hi. But how do I choose which lights ?
I don’t want all the lights. Just someone of them.
And if they are on I would like to return a text (I don’t want to use the light name as results. I want a friendlier name as results)

Well, you keep changing your requirements…

Maybe make up your mind first now, and then describe what it is you are after?

sorry… so I want to list (with a friendly name, i.e. a text ) the lights and switches which are on, but only from a selection of lights and switches from my house.
sorry for that.

baisclly this is the list i want, but i dont know how to connect between the if statments.

if i use this code only with one if, its working.

type: custom:button-card
variables:
  phrase: |
    [[[     if (states['light.all_liam'].state =='on')
        return 'Liam,' 
        else 
        return '' + 
      if (states['light.all_play_room'].state =='on')
        return 'Play Room,' 
        else 
        return '' + 
     if (states['light.all_eden'].state =='on')
        return 'Eden,' 
        else 
        return '' +
     if (states['light.all_kids_bath'].state =='on')
        return 'Kids Bath,' 
        else 
        return '' +
    if (states['light.all_bed_room'].state =='on')
        return 'Bed Room,' 
        else 
        return '']]]
tap_action:
  action: none
styles:
  card:
    - background-color: var(--background-color-off)
    - color: var(--text-color-off)
    - font-size: 20px
    - font-weight: 400
    - padding: 12px
  name:
    - justify-self: stretch
name: |
  [[[ return `<div style='display: flex';>
      <div>Lights on:    </div>
      <marquee>${variables.phrase}</marquee>`; ]]]

right, now this is getting more about creating the correct list and names, than using the marquee.

you can set the list and then select ‘on’ from those entities. Depending on your skills, you can do that in a core template entity, or in a javascript variable…

he fact you want other names than the friendly_name forces you to use a so called ‘mapper’, which does not make it easier.

My suggestion would be to first create the list and use those friendly_name s, and see where that takes you.

{% set lights = ['light.all_liam',  'light.all_play_room','light.all_eden','light.all_kids_bath'] %}
{{ expand(lights) |selectattr('state','eq','on')
|map(attribute='name')| list  }}

or use

{{ expand(lights) |selectattr('state','eq','on')
|map(attribute='name')|join(', ')  }}

at the end there, to scroll…
could be a starter for that in jinja (so not in the button-card variable, but as a standalone template: entity