Hello,
Is there any way to size/allign cards? specialy in height:
I am currently using horizontal-stacks (in panel mode) and then add the cards to the horizontal stack. For a new line, use a new horizontal-stack
Sorry, I meant a vertical-stack, and then horizontal-stacks. Like this
views:
- title: Test
path: test
visible:
- user: d9b7259c90364490937b8347d572cae8
- user: 973007d609a743b1a3f8014241746382
type: panel
badges: []
cards:
- type: vertical-stack
cards:
- type: glance
entities:
- sensor.studeerkamer_mexicaanse_bergpalm_temperature
- sensor.studeerkamer_mexicaanse_bergpalm_light_intensity
- sensor.studeerkamer_mexicaanse_bergpalm_moisture
- type: horizontal-stack
cards:
- type: entity
entity: sensor.studeerkamer_mexicaanse_bergpalm_temperature
- type: picture
image: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
tap_action:
action: none
hold_action:
action: none
- type: horizontal-stack
cards:
- type: entity
entity: sensor.studeerkamer_mexicaanse_bergpalm_temperature
- type: entities
entities:
- entity: sensor.studeerkamer_mexicaanse_bergpalm_temperature
- entity: sensor.studeerkamer_mexicaanse_bergpalm_light_intensity
This is what it looks like:
Notice the same entity card on row 2 and 3 are different sizes based on the card next to it
2 Likes
Maybe try this
1 Like
Yes this is what i mean, so they get the same because of the horizontal stack in it?
Will try it soon. Thanks
1 Like
Will try this one tho! thanks
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: entities
entities:
- entity: binary_sensor.rpi_power_status
- entity: binary_sensor.updater
- entity: sensor.installed_version
name: HA Installed Version
icon: mdi:home-assistant
- entity: sensor.latest_available_version
name: HA Latest Available Version
icon: mdi:home-assistant
- entity: sensor.hacs
- entity: sensor.last_boot
- entity: sensor.home_assistant_v2_db
state_color: true
title: Systeem
show_header_toggle: true
- type: custom:bar-card
entities:
- entity: sensor.processor_use
title: Prestaties
columns: '1'
direction: right
height: 40px
decimal: '1'
min: '0'
max: '100'
unit_of_measurement: '%'
positions:
icon: outside
indicator: inside
name: inside
minmax: 'off'
value: inside
severity:
- from: '0'
to: '10'
- from: '10'
to: '50'
color: orange
- from: '50'
to: '100'
color: red
entity_row: true
- type: custom:bar-card
entities:
- entity: sensor.memory_use_percent
columns: '1'
direction: right
height: 40px
decimal: '1'
min: '0'
max: '100'
unit_of_measurement: '%'
positions:
icon: outside
indicator: inside
name: inside
minmax: 'off'
value: inside
severity:
- from: '0'
to: '35'
- from: '35'
to: '75'
color: orange
- from: '75'
to: '100'
color: red
entity_row: true
- type: custom:bar-card
entities:
- entity: sensor.disk_use_percent
entity_row: true
columns: '1'
direction: right
height: 40px
decimal: '1'
min: '0'
max: '100'
unit_of_measurement: '%'
positions:
icon: outside
indicator: inside
name: inside
minmax: 'off'
value: inside
severity:
- from: '0'
to: '35'
- from: '35'
to: '70'
color: orange
- from: '70'
to: '100'
color: red
- type: custom:bar-card
entities:
- entity: sensor.cpu_temp
entity_row: true
columns: '1'
direction: right
height: 40px
decimal: '1'
min: '45'
max: '85'
unit_of_measurement: '%'
positions:
icon: outside
indicator: inside
name: inside
minmax: 'off'
value: inside
severity:
- from: '43'
to: '63'
color: green
- from: '63'
to: '72'
color: orange
- from: '72'
to: '85'
color: red
- type: divider
- type: vertical-stack
cards:
- type: glance
title: Component Count
columns: 4
entities:
- entity: sensor.count_automations
name: Automations
icon: mdi:autorenew
- entity: sensor.count_scripts
name: Scripts
icon: mdi:script-text-outline
- entity: sensor.count_zones
name: Zones
icon: mdi:map-marker-radius
- entity: sensor.count_device_trackers
name: Device Trackers
icon: mdi:map-marker
- entity: sensor.count_switches
name: Switches
icon: mdi:light-switch
- entity: sensor.count_sensors
name: Sensors
icon: mdi:resistor
- entity: sensor.count_binary_sensors
name: Binary Sensors
icon: mdi:unfold-more-horizontal
- entity: sensor.count_input_booleans
name: Input Booleans
icon: mdi:toggle-switch
- entity: sensor.count_input_numbers
name: Input Numbers
icon: mdi:numeric
- entity: sensor.count_input_texts
name: Input Texts
icon: mdi:alphabetical
- entity: sensor.count_input_selects
name: Input Select
icon: mdi:view-list
- entity: sensor.count_input_datetimes
name: Input Date Times
icon: mdi:calendar-clock
state_color: true
- type: entities
entities:
- entity: binary_sensor.check_home_assistant_configuration_update_available
- entity: binary_sensor.home_assistant_operating_system_update_available
- entity: binary_sensor.samba_share_update_available
- entity: binary_sensor.terminal_ssh_update_available
- entity: binary_sensor.visual_studio_code_update_available
- entity: binary_sensor.updater
state_color: true
title: Updates
Seems i have horizantal first and than vertical, can that be the problem, or anything els wrong in here?
1 Like
As far as I can see that is the problem. Set the first card to vertical, and change de subcards from vertical to horizontal.
Hello I am pretty new with HA and coding in general, i am resuming this old post because it is what i am looking for as eas way to reallign the card in my dash board.
i guess i learnt enough about the yaml configuration, but trying to add the comment below:
type: horizontal-stack
cards:
- type: vertical-stack
to RAW dsashboard config, cards are still wrongly alligned horizzontally and vertically, this is the beginning of the RAW file (just the beginning):
background: var(--background-image)
title: Casa
views:
- theme: transparentblue
path: default_view
title: Home
subview: false
icon: mdi:home
badges: []
cards:
- type: entities
entities:
- entity: switch.shelly_shellyplus1_a8032abd70e4
- entity: sensor.shelly_shellyplus1_a8032abd70e4_device_temp
title: Camera da letto
state_color: true
- type: entities
where, in my RAW file, i have to put those comments to make it working?
i did many attempt but without success.
then, where i can find out some basic tutorial to better understand the yaml scripting and the basic function, for a better understanding about the synthax?
thanks
I have no idea how to do that , in this screen , can do most back end stuff but this front end eludes me
I think you have to install HACS and use the custom grid card and layout card