Unrelated - but there is no need to keep both variants, leave only one working.
Guess this should be entity_id of input_select entity for which you need to select option.
The entity is a select entity, not an input_select⊠So it is the entity_id of the select entity⊠Is it right?
select, input_select - does not matter.
This code is to set some option in button-card:
- type: custom:button-card
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.test_value
option: xyz
But the initial question is unclear.
Create an input_boolean and use its state as condition for the green cards:
type: conditional
conditions:
- condition: state
entity: input_boolean.whatever
state: 'on'
Then toggle this input_boolean with the red card:
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- border-radius: 10px
- height: 100%
- background-color: red
tap_action:
action: toggle
entity: input_boolean.whatever
Ok, that was much easier than I thought =) I was missing the right helper. Thank you very much, it works perfectly
I am having difficulty getting button-card to do what I want in a grid layout. Here is what I have managed to achieve:
What I would like is for the Labels to be the same height as the buttons. I think the code I have should accomplish that (âplace-items: stretch stretchâ in the layout section, specifically, but it doesnât and I donât know why. If I change it to âcenter stretchâ the buttons appear vertically centred but do not fill the full height of the box. Any help would be appreciated.
Here is my code:
type: vertical-stack
title: Lights
cards:
- type: custom:layout-card
layout_type: grid
columns: 4
square: false
title: Lights
entities:
- entity: light.all_lights
type: custom:button-card
name: Groups
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 3fr
name:
- justify-self: start
- type: custom:button-card
entity: light.downstairs_lights
name: Ground
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.downstairs_lights
- type: custom:button-card
entity: light.all_lights
name: All
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.all_lights
- type: custom:button-card
entity: script.1584181003341
name: Reset
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: script.1584181003341
- entity: light.kitchen_lights
type: custom:button-card
name: Kitchen
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 3fr
name:
- justify-self: start
- type: custom:button-card
entity: light.kitchen
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Main
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.kitchen
- type: custom:button-card
entity: light.kitchen_lights
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Kitchen
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.kitchen_lights
- type: custom:button-card
entity: light.conservatory
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Cons.
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.conservatory
- entity: light.hall_lights
type: custom:button-card
name: Hall
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
styles:
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 3fr
name:
- justify-self: start
- type: custom:button-card
entity: light.hall
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Door
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.hall
- type: custom:button-card
entity: light.hall_lights
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Hall
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.hall_lights
- type: custom:button-card
entity: light.landing
show_name: true
show_icon: true
show_state: false
show_last_changed: false
show_label: false
color: auto
name: Landing
styles:
width: 35px
double_tap_action:
action: more-info
hold_action:
action: more-info
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.landing
layout:
grid-template-columns: 40% 20% 20% 20%
grid-auto-rows: auto
place-items: stretch stretch
view_layout:
column: 3
Assign a height: 100% to your 3 âlabelâ cards.
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;
}
Thanks. Do you mean add:
card:
- height: 100%
to their styles section, because if so, thatâs not making a difference, unfortunately.
I copied your code and only added
styles:
card:
- height: 100%
to the cards in the first column.
2 Likes
This is your code (second card with the updated code):
So there must be another reason in your layout.
@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âŠ
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.
Again, not sure if I understood you properly - correct me if I am wrong:
- There is input_select.xxx. Filled with options [aaa, bbb, ccc]. The current state is âcccâ.
- 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.
- Step no. 2 should be executed right after the 1st input_select changes.
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;
}
2 Likes
@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âŠ
- Avoid tagging people by @. This is not advised.
- 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).
- 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.
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
1 Like
thanks for the effort. Sebba found the solution a few posts below if youâre interested
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.
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âŠ