Hi there,
Can anybody please help me create an input selection card with buttons instead of the standard dropdown?
I’m in the following stage and would like the three buttons’ width to fill the entire width of the card. Distributed evenly and centered buttons’ content.
…
That works, thanks a lot @Roderik! Would be nice to have it done in a way so it automatically determines the right width as a certain width % value that works well on one device doesn’t work on another but I can live without that.
Played around a little longer.
If you set the width to 100% and add “flex-wrap: nowrap;” to the div.chip-container it should automatically scale for you.
Can you check if this works?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Notify Michal when Away
icon: mdi:message-badge
entity: input_select.doorbell_notification_away_michal
icon_color: blue
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: Today
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: Today
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'Today') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'On'
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: 'On'
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'On') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
- type: template
entity: input_select.doorbell_notification_away_michal
tap_action:
action: call-service
service: input_select.select_option
data:
option: 'Off'
target:
entity_id: input_select.doorbell_notification_away_michal
icon: null
content: 'Off'
card_mod:
style: |
ha-card {
justify-content: center;
{% if is_state('input_select.doorbell_notification_away_michal', 'Off') %}
--chip-background: rgba(var(--rgb-blue), 0.7);
{% else %}
--chip-background: inherit; # set it to the default or whatever color you want
{% endif %}
}
alignment: Center
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: 0px 12px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-box-shadow: none;
--chip-border-radius: 10px;
--chip-height: 42px;
--chip-padding:10px;
}
The following card_mod code should turn “ Low Batteries!” to blue and it will turn the titles of each sub card to green. Hopefully you can use it to get the desired effect (wasn’t sure what title you wanted changed, the top one, or the individual ones).
Hi @Ildar_Gabdullin thank you. I was able to get rid of the separator by using the updated version of Stack-in-card. However, now there’s a big empty space when the bottom card doesn’t have any items visible. How do I use card-mod to remove that extra space at the bottom?
Below, is what my current code looks like:
type: custom:stack-in-card
mode: vertical
cards:
- type: entities
title: iGPU
entities:
- entity: sensor.cpu_gt_core_temperature
name: Core Temperature
- entity: sensor.gpu_d3d_memory_dynamic_memory
name: Dynamic RAM
- type: custom:bar-card
severity:
- from: '0'
to: '0'
hide: true
- from: '1'
to: '40'
color: '#007A00'
- from: '41'
to: '90'
color: '#EA9000'
- from: '91'
to: '100'
color: '#C41400'
entities:
- entity: sensor.gpu_d3d_usage
name: iGPU Usage
- entity: sensor.gpu_video_decode_0_usage
name: Video Decoder 0
- entity: sensor.gpu_video_decode_1_usage
name: Video Decoder 1
- entity: sensor.gpu_video_processing_0_usage
name: Video Encoder 0
- entity: sensor.gpu_video_processing_1_usage
name: Video Encoder 1
hello, trying to reduce the size of the header image of the plant-card. was able to get it to work on my browser, but any change to the image does not go through on lenovo smart display which just displays the dashboard via a webpage. inspecting the element of the lenovo display using chrome shows that the size isnt changing. any suggestion on how to fix this?
I am trying to change stack-in-card’s header “padding-bottom” to 0px globally to all my stack-in-card’s via my theme.yaml.
The only way I can change the CSS style is via a single stack-in-card via Developer Tools (in the screenshot example below). I’ve already spent hours on this trying to figure this out on my own without any luck. I am hoping someone will be able to help; as I’ve tried everything I possibly could.
@Ildar_Gabdullin thank you so much. This is my first experience with shadowRoot. The code works within that specific card.
I tried to globally make this change in my theme.yaml (see code below); however, it doesn’t seem to affect any of my similar stack-in-cards. I completely deleted the web browser cache and reloaded the webpage without any luck.
I just appended the card-mod code you gave me to the bottom of my theme.yaml file (code below)… however, it didn’t make any difference:
Low Batteries!” to blue and it will turn the titles of each sub card to green. Hopefully you can use it to get the desired effect (wasn’t sure what title you wanted changed, the top one, or the individual ones).
