I have a lovelace entity card with custom-buttons that I want to align horizontally. I have been able to achieve this when I use a horizontal-stack card(below) however I want to do this within an entity card with other entities. I am sure it is just a formatting issie, but I cannot seem to get this to work. Any help would me much appreciated.
This is what my entity card looks like
This is my code for the entity card
type: entities
entities:
- cards:
- content: '## Front Yard'
style: |
ha-card {
background: rgba(0, 0, 0, 0);
box-shadow: none;
}
.markdown {
padding-left: 0px;
}
type: markdown
- entity: script.sprinkler_zone_front
layout: icon_name
name: Run Now
size: 30px
state:
- icon: 'mdi:play-circle'
value: 'off'
- icon: 'mdi:autorenew'
spin: true
styles:
card:
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
value: 'on'
styles:
card:
- border-radius: 10px
- background-color: '#333'
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: script.sprinkler_zone_front
type: 'custom:button-card'
layout: horizontal
min_columns: 2
type: 'custom:layout-card'
- conditions:
- entity: script.sprinkler_zone_front
state: 'on'
name: Zone currently running
row:
entity: sensor.sprinkler_current_zone
icon: 'mdi:numeric'
type: conditional
- conditions:
- entity: script.sprinkler_zone_front
state: 'on'
row:
entity: sensor.sprinkler_zone_front_time_remaining
icon: 'mdi:progress-clock'
type: conditional
- type: divider
- entity: input_number.station1_run_time
icon: 'mdi:sprinkler'
name: Zone 1
- entity: input_number.station2_run_time
icon: 'mdi:sprinkler'
name: Zone 2
- entity: input_number.station3_run_time
icon: 'mdi:sprinkler'
name: Zone 3
- type: divider
- type: 'custom:button-card'
color_type: card
state:
- icon: 'mdi:cancel'
value: 'off'
styles:
card:
- color: '#F8390A'
- icon: 'mdi:check-circle'
styles:
card:
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
- color: '#2AB81E'
value: 'on'
styles:
name:
- size: 5px
- color: yellow
- font-size: 15px
card:
- width: 40px
- height: 40px
- background-color: blue
- border-radious: 10px
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
entity: input_boolean.station1_mon
name: Mon
icon: 'mdi:check-circle'
- type: 'custom:button-card'
color_type: card
state:
- icon: 'mdi:cancel'
value: 'off'
styles:
card:
- color: '#F8390A'
- icon: 'mdi:check-circle'
styles:
card:
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
- color: '#2AB81E'
value: 'on'
styles:
name:
- size: 5px
- color: yellow
- font-size: 15px
card:
- width: 40px
- height: 40px
- background-color: blue
- border-radious: 10px
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
entity: input_boolean.station1_tue
name: Tue
icon: 'mdi:check-circle'
show_header_toggle: false
This is what my horizontal-stack card looks like. This is the look I am trying to achieve
This is the code for my horizontal-stack card
type: horizontal-stack
color: blue
cards:
- type: 'custom:button-card'
color_type: card
state:
- icon: 'mdi:cancel'
value: 'off'
styles:
card:
- color: '#F8390A'
- icon: 'mdi:check-circle'
styles:
card:
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
- color: '#2AB81E'
value: 'on'
styles:
name:
- size: 5px
- color: yellow
- font-size: 15px
card:
- width: 40px
- height: 40px
- background-color: blue
- border-radious: 10px
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
color: Black
entity: input_boolean.station1_mon
name: Mon
icon: 'mdi:check-circle'
- type: 'custom:button-card'
color_type: card
state:
- icon: 'mdi:cancel'
value: 'off'
styles:
card:
- color: '#F8390A'
- icon: 'mdi:check-circle'
styles:
card:
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
- color: '#2AB81E'
value: 'on'
styles:
name:
- size: 5px
- color: yellow
- font-size: 15px
card:
- width: 40px
- height: 40px
- background-color: blue
- border-radious: 10px
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
color: Black
entity: input_boolean.station1_tue
name: Tue
icon: 'mdi:check-circle'
- type: 'custom:button-card'
color_type: card
state:
- icon: 'mdi:cancel'
value: 'off'
styles:
card:
- color: '#F8390A'
- icon: 'mdi:check-circle'
styles:
card:
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
- color: '#2AB81E'
value: 'on'
styles:
name:
- size: 5px
- color: yellow
- font-size: 15px
card:
- width: 40px
- height: 40px
- background-color: blue
- border-radious: 10px
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
color: black
entity: input_boolean.station1_wed
name: Wed
icon: 'mdi:check-circle'
- type: 'custom:button-card'
color_type: card
state:
- icon: 'mdi:cancel'
value: 'off'
styles:
card:
- color: '#F8390A'
- icon: 'mdi:check-circle'
styles:
card:
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
- color: '#2AB81E'
value: 'on'
styles:
name:
- size: 5px
- color: yellow
- font-size: 15px
card:
- width: 40px
- height: 40px
- background-color: blue
- border-radious: 10px
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
color: black
entity: input_boolean.station1_thu
name: Thu
icon: 'mdi:check-circle'
- type: 'custom:button-card'
color_type: card
state:
- icon: 'mdi:cancel'
value: 'off'
styles:
card:
- color: '#F8390A'
- icon: 'mdi:check-circle'
styles:
card:
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
- color: '#2AB81E'
value: 'on'
styles:
name:
- size: 5px
- color: yellow
- font-size: 15px
card:
- width: 40px
- height: 40px
- background-color: blue
- border-radious: 10px
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
color: black
entity: input_boolean.station1_fri
name: Fri
icon: 'mdi:check-circle'
- type: 'custom:button-card'
color_type: card
state:
- icon: 'mdi:cancel'
value: 'off'
styles:
card:
- color: '#F8390A'
- icon: 'mdi:check-circle'
styles:
card:
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
- color: '#2AB81E'
value: 'on'
styles:
name:
- size: 5px
- color: yellow
- font-size: 15px
card:
- width: 40px
- height: 40px
- background-color: blue
- border-radious: 10px
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
color: black
entity: input_boolean.station1_sat
name: Sat
icon: 'mdi:check-circle'
- type: 'custom:button-card'
color_type: card
state:
- icon: 'mdi:cancel'
value: 'off'
styles:
card:
- color: '#F8390A'
- icon: 'mdi:check-circle'
styles:
card:
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
- color: '#2AB81E'
value: 'on'
styles:
name:
- size: 5px
- color: yellow
- font-size: 15px
card:
- width: 40px
- height: 40px
- background-color: blue
- border-radious: 10px
- box-shadow: 0 0 4px 2px var(--paper-item-icon-active-color)
color: black
entity: input_boolean.station1_sun
name: Sun
icon: 'mdi:check-circle'
1 post - 1 participant