Lovelace: Button card

[jmfargas]

@Ildar_Gabdullin “overflow: visible” doesn’t fix the problem, unfortunately. I think it seems to be related to the fact that the card is at the bottom of the view and it is small, so the dropbox needs to open up instead of down and gets cut by the upper view…, it’s very bad.

The following image shows the problem with the views next to it:

I don’t know whether the stack-in-card will help? I haven’t use it yet. It seems to be a card for many items?
For the 2nd question, the dropdown needs to show the selected item and if the user changes the item, the select entity needs to be updated with that item. So in my case, the user needs to change the time using the dropbox…

[Ildar_Gabdullin]

1. Avoid tagging people by @. This is not advised.
2. Since you have not posted a code - people have to guess here. But - please - do not post the whole code, post only a minimal snippet where you are facing a problem with overflowing (which cannot be fixed with my “overflow: visible” code).

@jmfargas

the dropdown needs to show the selected item and if the user changes the item, the select entity needs to be updated with that item

3. Hard to believe - but this is exactly the way how every “input_select” works).
   User selects a value → the state of the “input_select” is updated to the selected value.

[Still_ill]

Sebba, you are a beast. It’s unbelievable that you have a perfect solution to every question. big respect. and as always, thank you very much

[Still_ill]

thanks for the effort. Sebba found the solution a few posts below if you’re interested

[sesquipedality]

Weird. That absolutely does not work for me.

ETA Never mind. I was forgetting to set “place-items” back to “stretch stretch”. All working now. Thanks.

[jmfargas]

I posted the code actually… This is the new code with your suggestion:

    srtrelatslct:
      card:
        type: "entities"
        entities:
          - "[[[ return variables.var_startinrelative_slct_entity ]]]"
        styles:
          grid:
            - grid-template-areas: '"i" "n" "some_card"'
            - grid-template-columns: 1fr
            - grid-template-rows: 1fr min-content min-content
          card:
            - overflow: visible

And the result is what I posetd earlier.

With the dropdown. not even the driopdown shows ?? I’m probably not doing the right thing…

[jmfargas]

By the way, I don’t know what to put in the tap_action if it’s not filled automatically by default?

[Ildar_Gabdullin]

@jmfargas

I posted the code actually

I saw only that code you posted - and this is not a code of the whole card, just a code for “tap_action”.
As well as this new code - this is a part related to a “srtrelatslct” custom field inside some unknown button-card.
And this part contains the misplaced “styles” part from my example.
And since this part is misplaced - you are getting a wrong result.

I would suggest to test with simple cards and proceed with complex cases step by step.

[jmfargas]

You’re right, the code was misplaced, thanks for the tip!
Now I managed to hide some items, but I would like to reduce the space between the options. What is the property I need to change?

My code is the following:

    srtrelatslct:
      card:
        type: "entities"
        entities:
          - "[[[ return variables.var_startinrelative_slct_entity ]]]"
        card_mod:
          style: |
            ha-card {
              --ha-card-background: transparent;
              box-shadow: none;
              border: none;
              --mdc-icon-size: 0px;
              --mdc-select-label-ink-color: transparent;
              --mdc-theme-primary: transparent;
              --mdc-select-disabled-ink-color: transparent;
            }

The idea is to hide everything except the down arrow and the selectable options. I still didn’t manage to hice the lower line of the dropdown text…

[Ildar_Gabdullin]

@jmfargas

but I would like to reduce the space between the options.

What is an “option”? Post a picture.

[jmfargas]

The space between the times: 0:00, 0:30, 1:00, 1:30 … of the dropdown. It would be nice to make a smaller space…

[Ildar_Gabdullin]

Ask in the card-mod thread.

[jmfargas]

OK. For the 2nd question, what I mean is whether there is a card that does exactly what the standard dropdown does, but with easier to configure styles?

[Thorsten1982]

Hello I don’t know why but the dashboard always shows: "No card type found

I installed Button Card via HACS, it is also available in the resources and I restarted.

- type: custom:button-card
  entity: light.am_bett_licht
  icon: mdi:home
  color: auto
  color_type: card
  tap_action:
    action: more-info
  name: Home
  styles:
    card:
      - font-size: 12px
      - font-weight: bold

[Thorsten1982]

I found the problem solved, it was due to the formatting. Sorry.

[officialmatt (Matt)]

I have a dynamic sidebar on my home view, which is inspired by https://github.com/matt8707/hass-config/blob/f836da87f5d4dced111c4fbea709adbdcebc95fd/sidebar.yaml

The sidebar includes info such as cheapest petrol in the area, what meal is on the planner tonight, etc.

In my sensor template I’ve set up anchor tags eg <a href="/lovelace/recipe">Latest Recipe</a> in order to add contextual information.

The config is all in place, I’ve set up all the anchors - I just can’t get them to work on the front end. I’ve the card set to tap action: none, and I can’t have the tap action just do one thing because there are a number of these contextual links.

I can see that css is set to disable pointer events, but when I turn them back on I can see the ripple effect but the links dont actually do anything.

Has anyone had luck getting anchor tags to work in a custom button card?

[Psi]

Hi Mates,
my card sometimes does not update:

button_card_templates:
  roomcard:
    variables:
      temp_entity: null
      humi_entity: null
      setTemp_entity: null
      valve_entity: null
      window_open_entity: null
      lights_on_entity: null
    group_expand: true
    triggers_update: >-
      [[[ 
        const res = [variables.temp_entity, variables.humi_entity,
      variables.setTemp_entity, variables.valve_entity,
      variables.window_open_entity, variables.lights_on_entity].filter(i =>
      !!i); console.log(res); return res; ]]]

So the question is: Is templating in triggers_update not supported?

The lights_on_entitiy ist mostly a group a lights.

---

**Solved**

The return value of triggers_update can not handle arrays so

     triggers_update:
      - '[[[ return variables.temp_entity ]]]'
      - '[[[ return variables.humi_entity ]]]'

does work

[Still_ill]

Hello everyone,

Is it possible to integrate a kind of slider in this button card that enables brightness control of the lamp? It does not necessarily have to be a slider. As long as the brightness can be regulated and visualized, I am very open to creative ideas. (I was thinking of slightly graying out the card every 10% difference in brightness for visualization purposes. Since the color of the card adapts to the lamp color, this must be retained. The size of the card must also remain the same and cannot change, as it is precisely fitted to the layout of my dashboard

PS: In principle, I would prefer to implement it as in the slider button card by mattieha, without changing my card design

Here is the Card with code:

type: custom:button-card
icon: phu:play
aspect_ratio: 1/1
show_name: false
entity: light.hue_play_2
tap_action:
  action: toggle
hold_action:
  action: more-info
styles:
  card:
    - border-radius: 24px
    - background-color: |
        [[[
          if (states['light.hue_play_2'].state == 'on') {
            const rgb = states['light.hue_play_2'].attributes.rgb_color;
            return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
          }
          return 'var(--contrast10)';
        ]]]
  icon:
    - color: var(--black)
card_mod:
  style: |
    :host {
      height: 100% !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      position: unset !important;
      display: grid !important;
      }
view_layout:
  grid-column: 2
  grid-row: 3

Thank you already

[LiQuid_cOOled]

check out the Slider Button Card in HACS. It sounds exactly like what you are looking to create.

[Still_ill]

@Still_ill

PS: In principle, I would prefer to implement it as in the slider button card by mattieha, without changing my card design

Thanks, but as I already mentioned, unfortunately that doesn’t work because the slider button card changes my design too much. Unfortunately, since I’m currently creating a dashboard based on colors, this isn’t a solution for me. unless there is a way to just insert the slider into the existing button card.