noxx
August 27, 2023, 8:22am
726
you mean i need 2 cards. at the moment in dont understand the syntax of this addon
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
view_layout:
column: 1
cards:
- type: entities
entities:
- sensor.orp_wert_12_stunden_min
- sensor.orp_wert_12_stunden_max
- sensor.aussentemperatur_12h_min
type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
view_layout:
column: 2
cards:
- type: entities
entities:
- sensor.orp_wert_12_stunden_min
- sensor.orp_wert_12_stunden_max
- sensor.aussentemperatur_12h_min
Tadies
August 27, 2023, 8:40am
727
im gonna try once more (im not a guru)ā¦
thatās ya main layout
type: entities
entities:
- sensor.disk_use_percent_config
- sensor.disk_use
- sensor.disk_free
view_layout:
column: 1
card 2
type: entities
entities:
- sensor.memory_use_percent
- sensor.memory_use
- sensor.memory_free
view_layout:
column: 2
this is just an example
noxx
August 27, 2023, 4:44pm
728
ok, see that it works on your machine. try different thing. on my installation its not possible to set the cards side-by-side. i dont know why.
can you show the complete raw code of your example?
Tadies
August 27, 2023, 5:03pm
729
- layout:
max_cols: 5
path: test
badges: []
cards:
- type: entities
entities:
- sensor.disk_use_percent_config
- sensor.disk_use
- sensor.disk_free
view_layout:
column: 1
- type: glance
entities:
- sensor.memory_use_percent
- sensor.memory_use
- sensor.memory_free
view_layout:
column: 2
this is just the exampleā¦
Tadies
August 27, 2023, 7:54pm
731
Aslong you add the view_layout:
1 Like
AleXSR700
September 13, 2023, 1:29pm
732
Maybe someone here can help me out.Sidebarfor one of my dashboards but I would like to keep one of the cards with a fixed width (default masonry width).max_width: 500 for this, but the card still gets stretched across the entire screen.
Beginning of my card:
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 3fr 1fr
grid-template-rows: auto
grid-template-areas: |
"main1 side1"
"main2 side2"
cards:
- type: custom:config-template-card
Is it possible to have the dashboard set to Sidebar and have one card stay in masonry and one Sidebar?
akeslo
September 25, 2023, 1:58pm
733
How do I force a vertical-stack to go to column 2?
arganto
September 25, 2023, 4:55pm
735
Tadies:
At bottom of card
Will not work. You should keep the spaces, ā¦
view_layout:
column: 3
Tadies
September 25, 2023, 5:00pm
736
Yeah somehow it didnāt get posted rightā¦
Septain21
October 7, 2023, 12:16pm
737
Good morning
Iām desperately trying to play with the row heights in order to have the first card 10%, the second 60% and the third 30%.
here is my configuration:
- theme: Mushroom
title: Onduleur
path: onduleur
background: center / cover no-repeat url('/local/fondecransolaire.jpeg') fixed
type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
grid-template-areas: |
"header header"
"left right"
"footer1 footer2"
subview: true
icon: mdi:laptop
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:home
icon_color: purple
tap_action:
action: navigate
navigation_path: >-
https://3jtke6aw2sxw2a5omhziacqagcsn8t27.ui.nabu.casa/dashboard-sidebar/test4
alignment: left
view_layout:
grid-area: header
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.ha_puissance_pv1
decimals: 0
unit: W
name: SUDEST
- entity: sensor.ha_tension_pv1
decimals: 0
unit: V
name: Voltage
- entity: sensor.ha_courant_pv1
decimals: 1
unit: A
name: Current
show:
horseshoe_style: colorstopgradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 43
length: 70
styles:
- opacity: 0.2;
vlines:
- id: 0
xpos: 50
ypos: 59
length: 30
styles:
- opacity: 0.2;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 3em;
- opacity: 0.9;
- id: 1
entity_index: 1
xpos: 46
ypos: 58
styles:
- font-size: 2em;
- text-anchor: end;
- id: 2
entity_index: 2
xpos: 56
ypos: 58
styles:
- font-size: 2em;
- text-anchor: start;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
- id: 1
entity_index: 1
xpos: 46
ypos: 68
styles:
- font-size: 0.9em;
- text-anchor: end;
- opacity: 0.7;
- id: 2
entity_index: 2
xpos: 54
ypos: 68
styles:
- font-size: 0.9em;
- text-anchor: start;
- opacity: 0.7;
horseshoe_scale:
min: 0
max: 3600
color_stops:
'0': '#0277BD'
'3000': '#FBC02D'
view_layout:
grid-area: footer1
- type: custom:flex-horseshoe-card
card_mod:
style:
.container:
.card--filter-none:
.datagroup: |
text:nth-of-type(8) .state__value {
{% if states('sensor.mode_solaire') == 'Mode Solaire' %}
fill: green !important;
{% else %}
fill: red !important;
{% endif %}
}
entities:
- entity: sensor.ha_puissance_pv1
decimals: 0
unit: W
name: AXPERT MAX
- entity: sensor.ha_onduleur_puissance_daily
decimals: 1
unit: kWh
name: Jour
- entity: sensor.production_solaire_pv_monthly
decimals: 1
unit: kWh
name: Mois
- entity: sensor.ha_onduleur_temperature
decimals: 0
unit: Ā°C
name: TempƩrature
- entity: sensor.mode_solaire
icon: mdi:sun-angle-outline
- entity: sensor.ha_tension_batterie
decimals: 1
unit: V
name: Batt Voltage
show:
horseshoe_style: colorstopgradient
layout:
hlines:
- id: 0
xpos: 51
ypos: 43
length: 70
styles:
- opacity: 0.2;
vlines:
- id: 0
xpos: 50
ypos: 59
length: 30
styles:
- opacity: 0.2;
states:
- id: 0
entity_index: 0
xpos: 55
ypos: 37
styles:
- font-size: 3em;
- opacity: 0.9;
- id: 1
entity_index: 1
xpos: 47
ypos: 58
styles:
- font-size: 1.8em;
- text-anchor: end;
- id: 2
entity_index: 2
xpos: 52
ypos: 58
styles:
- font-size: 1.8em;
- text-anchor: start;
- id: 3
entity_index: 3
xpos: 5
ypos: 7
styles:
- font-size: 1.2em;
- text-anchor: start;
- id: 4
entity_index: 4
xpos: 70
ypos: 19
styles:
- font-size: 1.03em;
- text-anchor: end;
- id: 5
entity_index: 5
xpos: 97
ypos: 7
styles:
- font-size: 1.2em;
- text-anchor: end;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
- id: 1
entity_index: 1
xpos: 46
ypos: 68
styles:
- font-size: 0.9em;
- text-anchor: end;
- opacity: 0.7;
- id: 2
entity_index: 2
xpos: 54
ypos: 68
styles:
- font-size: 0.9em;
- text-anchor: start;
- opacity: 0.7;
icons:
- id: 4
xpos: 23
ypos: 32
entity_index: 4
icon_size: 2
horseshoe_scale:
min: 0
max: 3600
color_stops:
'0': '#4567EF'
'700': '#D82039'
'1300': '#DBD037'
'3000': '#17AC6B'
view_layout:
grid-area: left
- type: custom:flex-horseshoe-card
card_mod:
style:
.container:
.card--filter-none:
.datagroup: >
text:nth-of-type(4) .state__value, text:nth-of-type(4)
.state__uom {
{% if states('sensor.balance_charge_decharge_batterie') | float >= 0 %}
fill: green !important;
{% else %}
fill: red !important;
{% endif %}
}
entities:
- entity: sensor.balance_charge_decharge_batterie
decimals: 0
unit: W
name: BATTERIE
- entity: sensor.ha_charge_batterie_daily
decimals: 1
unit: kWh
name: Jour
- entity: sensor.ha_decharge_batterie_jour
decimals: 1
unit: kWh
name: Mois
- entity: sensor.ha_puissance_charge_batterie
decimals: 0
unit: +W
name: Charge batterie
- entity: sensor.ha_puissance_decharge_batterie
decimals: 0
unit: '-W'
name: DĆ©charge batterie
show:
horseshoe_style: colorstopgradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 43
length: 70
styles:
- opacity: 0.2;
vlines:
- id: 0
xpos: 50
ypos: 59
length: 30
styles:
- opacity: 0.2;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 3em;
- opacity: 0.9;
- id: 1
entity_index: 1
xpos: 46
ypos: 58
styles:
- font-size: 1.8em;
- text-anchor: end;
- id: 2
entity_index: 2
xpos: 52
ypos: 58
styles:
- font-size: 1.8em;
- text-anchor: start;
- id: 3
entity_index: 3
xpos: 5
ypos: 7
styles:
- font-size: 0.8em;
- text-anchor: start;
- id: 4
entity_index: 4
xpos: 97
ypos: 7
styles:
- font-size: 0.8em;
- text-anchor: end;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
- id: 1
entity_index: 1
xpos: 46
ypos: 68
styles:
- font-size: 0.9em;
- text-anchor: end;
- opacity: 0.7;
- id: 2
entity_index: 2
xpos: 54
ypos: 68
styles:
- font-size: 0.9em;
- text-anchor: start;
- opacity: 0.7;
horseshoe_scale:
min: -3000
max: 3000
color_stops:
'3000': green
'-3000': red
Thanks for your help
The last few days Iām working on a mobile dashboard and Iām using layout-card for the first time. I came up with the following dashboard and noticed that the margin between the top and bottom of cards are different than the margin between the right and left of the cards. How can I make the margin between top, right, bottom, left all equal?
Hi, Iām trying to create a card with entities on the left and an icon on the right (cropped, I like it that way).
This is the graphic result:
Could you give me some advice?
square: false
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: markdown
content: >-
<center><strong><font size="3"><font
color=white>FRIGORIFERO</font></font></center>
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 23% 140%
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: spacer
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ble_temp_freezer
icon_color: blue
icon: mdi:snowflake-thermometer
- type: custom:mushroom-chips-card
chips:
- type: spacer
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.ble_temp_frigo
icon_color: blue
icon: mdi:snowflake-thermometer
- type: button
tap_action:
action: none
entity: sensor.ble_temp_frigo
icon_height: 100%
show_name: false
icon: mdi:fridge
style: |
ha-card {
background-color: transparent;
box-shadow: none;
}
:host {
--paper-item-icon-color: grey
columns: 2
girkers
October 21, 2023, 3:00am
740
This is the first time I have used this and it is exactly what I was after.
I am using it for a card only to allow me to have two other cards side by side and it works a treat. The only issue I have is that one of the cards is not being centred vertically.
As you can see the right hand card is not centring. Can anyone suggest how I go about making the right card sit beautifully in the middle of the card.
Thanks
Sorry to dig up an old post but this doesnāt seem to work with custom:button-cards within a layout card.
Card in area āA1ā has its height manually adjusted.
Let me know if this is a custom:button-card issue/standard behavior or if there is something wrong with my code.
type: custom:mod-card
card_mod:
style:
layout-card$:
grid-layout$: |
:host {
padding: 0rem !important;
}
#root {
margin: 0rem !important;
height: 100% !important;
}
#root > * {
margin: 0.2rem !important;
}
.: |
ha-card {
border: solid 0.1rem blue !important;
height: 100% !important;
}
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 30% 30% 1fr
grid-template-rows: 30% 1fr
grid-template-areas: |
"A1 A2 A3"
"A1 A2 B3"
cards:
- type: custom:button-card
view_layout:
grid-area: A1
styles:
card:
- height: 10.2rem
entity: switch.wallswitch50
- type: custom:button-card
view_layout:
grid-area: A2
entity: switch.wallswitch50
- type: horizontal-stack
view_layout:
grid-area: A3
cards:
- type: custom:button-card
icon: mdi:volume-minus
- type: custom:button-card
icon: mdi:volume-minus
- type: custom:button-card
icon: mdi:volume-minus
- type: horizontal-stack
view_layout:
grid-area: B3
cards:
- type: custom:button-card
icon: mdi:volume-minus
- type: custom:button-card
icon: mdi:volume-minus
- type: custom:button-card
icon: mdi:volume-minus
Edit:
Answer is to add
styles:
card:
- height: 100%
to each button card or via a template.
BTW thank you for the other part related to padding/margins as this works perfectly.
This works for me:
- type: 'custom:mod-card'
card_mod:
style:
layout-card$:
grid-layout$: |
:host {
padding: 0px !important;
}
#root {
margin: 0px !important;
}
#root > * {
margin: 0px !important;
}
card:
type: 'custom:layout-card'
...
Or you can try:
- type: 'custom:layout-card'
style:
'--masonry-view-card-margin': 0px
That mā¦
CDRX2
November 2, 2023, 4:52pm
742
I think youāll need to mess with the button-card itself, as far as I remember, it has a default aspect ratio set that will result in the behaviour youāre seeing.
Dibbler
November 2, 2023, 8:26pm
743
Layout Card vs Grid card - I tried to replace my grid cards with layout card. Doing this i recognized that with the layout card compared to the grid card i have an small frame in the layout card
Layout Card
Grid Card
Question is now how could i get rid of this small frame. Compared with other cards the layout card has always this frame which makes them looking smaller compred to other card - This drives me mad.
As layout option i use:
grid-template-columns: 1fr 1fr
grid-template-rows: auto
margin: 0px
padding: 0px
Any one any idea i could try?
Check my post just above. You can manage all margins by embedding your layout-card In a custom.mod-card. this part is the one you need to play with:
type: custom:mod-card
card_mod:
style:
layout-card$:
grid-layout$: |
:host {
padding: 0rem !important;
}
#root {
margin: 0rem !important;
}
#root > * {
margin: 0.2rem !important;
}
Thanks, will check it out. Wondering how I can bypass the default aspect ratio and force height: 100% as I already tried " !important;"
