Hi there,
I have a dashboard where I have a picture on the left side, and a text on the right side next to it :
Issue is the icon is not center compared to the text box.
To make it more visible, I have put a black background and we can clearly see that the icon is bigger than the text box on the right … and even not bigger, but also goes besides the text (not aligned).
I am using a grid and both are on the same row / column.
- type: picture-entity
show_state: false
show_name: false
camera_view: auto
entity: switch.lenovo_tab_m10_plus_3rd_gen_screensaver
image: /local/400px-VTO2000A.png
card_mod:
style: |
ha-card {
background: black;
border: 0px;
}
view_layout:
grid-area: r11-1
- type: custom:mushroom-template-card
secondary: '{{ states("input_text.generative_ai_doorbel") }}'
icon: ''
entity: input_text.generative_ai_doorbel
fill_container: true
multiline_secondary: true
tap_action:
action: navigate
navigation_path: /smartphone-cameras/0
card_mod:
style: |
ha-card {
background: black;
border: 200px;
border-radius: 0px;
}
icon_color: ''
primary: ''
view_layout:
grid-area: r11-2
Any idea how to center those 2 without playing with the grid ?
Many Thanks,
Why not use the mushroom template card instead to show the picture ?
I am not familiar with this template card, and its purpose … reason why.
I finally succeeded by playing with a “margin-top” in the card-mod for that card, as highlighted below
- type: picture-entity
entity: switch.lenovo_tab_m10_plus_3rd_gen_maintenance_mode
show_state: false
show_name: false
camera_view: auto
image: /local/400px-VTO2000A.png
tap_action:
action: navigate
navigation_path: /lenovo-m10-plus-portier/0
card_mod:
style: |
ha-card {
background: transparent;
border: 0px;
}
view_layout:
grid-area: r11-1
- type: custom:mushroom-template-card
secondary: '{{ states("input_text.generative_ai_doorbel") }}'
icon: ''
entity: input_text.generative_ai_doorbel
fill_container: true
multiline_secondary: true
tap_action:
action: navigate
navigation_path: /lenovo-m10-plus-portier/0
card_mod:
style: |
ha-card {
background: transparent;
border: 0px;
**margin-top: 10px;**
}
icon_color: ''
primary: ''
view_layout:
grid-area: r11-2
I have just tried, but using the mushroom template card to display the picture only, the picture is even smaller … this card doesn’t seem to be made to display a picture on purpose :
- type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: /local/Camera-snapshots/doorbel-snapshot1.jpg
fill_container: true
badge_icon: ""
picture: /local/400px-VTO2000A.png
tap_action:
action: navigate
navigation_path: /smartphone-cameras/0
card_mod:
style: |
ha-card {
background: black;
border: 0px;
}
view_layout:
grid-area: r11-1
Sorry for the delayed response. I was out of town
Test this…
You can control the spacing a little better with layout card
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 30% 70%
cards:
- type: custom:mushroom-template-card
fill_container: true
picture: /local/400px-VTO2000A.png
tap_action:
action: navigate
navigation_path: /smartphone-cameras/0
layout: horizontal
card_mod:
style: |
ha-card {
background: none;
border: none;
--icon-border-radius: 0px;
--icon-size: 100px;
}
- type: custom:mushroom-template-card
secondary: '{{ states("input_text.generative_ai_doorbel") }}'
entity: input_text.generative_ai_doorbel
fill_container: true
multiline_secondary: true
tap_action:
action: navigate
navigation_path: /lenovo-m10-plus-portier/0
card_mod:
style: |
ha-card {
background: none;
border: none;
}
