Lovelace: Button card

[Still_ill]

Ok, that’s strange. I have the following card:

type: custom:button-card
aspect_ratio: 1/1
icon: mdi:volume-high
entity: media_player.living_room
tap_action:
  action: call-service
  service: media_player.volume_up
  target:
    entity_id: media_player.android_tv_192_168_178_44
styles:
  card:
    - border-radius: 24px
    - background-color: var(--green)
  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;
      }

If I now put it in a conditional card, it becomes smaller overall. How so?
On the left is without and on the right with conditional card

Here is the code with conditional card

type: conditional
conditions: []
card:
  type: custom:button-card
  aspect_ratio: 1/1
  icon: mdi:volume-high
  entity: media_player.living_room
  tap_action:
    action: call-service
    service: media_player.volume_up
    target:
      entity_id: media_player.android_tv_192_168_178_44
  styles:
    card:
      - border-radius: 24px
      - background-color: var(--green)
      - height: 100% !important;
      - width: 100% !important;
      - max-width: 100% !important;
  card_mod:
    style: |
      :host {
        height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        position: unset !important;
        display: grid !important;
      }

[sesquipedality]

Thanks. Do you mean add:

card:
   - height: 100%

to their styles section, because if so, that’s not making a difference, unfortunately.

[pedolsky]

@sesquipedality

I copied your code and only added

        styles:
          card:
            - height: 100%

to the cards in the first column.

[pedolsky]

@Still_ill

This is your code (second card with the updated code):

So there must be another reason in your layout.

[jmfargas]

@Ildar_Gabdullin , if you want to set a specific option that’s the way you do it. But my question is about how to set the select value using the dropdown directly read from the select options! There should be a way to do it, right?

I can use the entities card, but it uses too much space and it has too many gadgets (icon, text, underline, etc) and uses too much space, see the image below. And the other problem is that the dropdown list gets cut in the upper part, so you don’t see the upper values and cannot reach them ???, as shown below…

[Ildar_Gabdullin]

Let’s start from the 2nd question.
Fixed with “overflow: visible”.

type: custom:button-card
entity: sun.sun
layout: vertical
custom_fields:
  some_card:
    card:
      type: entities
      entities:
        - entity: input_select.test_value
styles:
  grid:
    - grid-template-areas: '"i" "n" "some_card"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - overflow: visible

Another thing is - WTH using button-card if you can use a stack-in-card here?

---

As for the 1st question.

@jmfargas

my question is about how to set the select value using the dropdown directly read from the select options

Again, not sure if I understood you properly - correct me if I am wrong:

1. There is input_select.xxx. Filled with options [aaa, bbb, ccc]. The current state is “ccc”.
2. There is input_select.yyy. You need to set the current option to “ccc” - i.e. to the current state of the 1st input_select.
3. Step no. 2 should be executed right after the 1st input_select changes.

[sebbaT]

This is because Lovelace adds default margin to cards…

You can either turn this off globally and put this in your theme (my suggestion):

masonry-view-card-margin: "0"

or change your widths, heights and margins in your card (less ideal):

type: conditional
conditions: []
card:
  type: custom:button-card
  aspect_ratio: 1/1
  icon: mdi:volume-high
  entity: media_player.living_room
  tap_action:
    action: call-service
    service: media_player.volume_up
    target:
      entity_id: media_player.android_tv_192_168_178_44
  styles:
    card:
      - border-radius: 24px
      - background-color: var(--green)
      - height: 100% !important;
      - width: 100% !important;
      - max-width: 100% !important;
  card_mod:
    style: |
      :host {
        height: calc(100% + 12px) !important;
        width: calc(100% + 8px) !important;
        max-width: calc(100% + 8px) !important;
        margin: -4px -4px -8px !important;
        position: unset !important;
        display: grid !important;
      }

[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?