In the code below I am trying to get the mobile view by using fluid columns snippet ,but for some reason it doesn’t work . Can anyone help please ?
title: My Home
views:
- title: Home
path: home
type: custom:grid-layout
layout:
grid-auto-columns: 150px
grid-auto-rows: 150px
grid-template-rows: 50px 30px 150px
grid-template-columns: repeat(auto-fill, minmax(150px, 8px))
grid-column-gap: 8px
grid-row-gap: 8px
cards:
I am facing a weird issue.
I have a dashboard that uses mediaquery, using 2 columns “15% 85%” when in portrait in iPad and 2 columns “15% auto 25%” when in landscape.
The center frame is using mansory layout and should have 2 columns, but I always defaults to one column, but still having a lot of space in the screen.
It does show 2 columns when I force it to landscape and back, but as you see below it falls back to one column on refresh.
Is this a known issue, or should I share my code?
Hi guys,
New to the custom-layout-card using the latest version from github.
I want to show a history graph full screen, that is at 100% width and 100% height.
My view only contains the below and is set to panelmode. I really tried all layouts: default, masonry, grid, vertical, horizontal.
See below the 243st 
version of my lay-out, and it might be entirely wrong.
I tried height, min_height, width, min_width. Directly under the card, above the card, inside the card, with the ‘style:’ header, without it, etcetera, but obviously missed the correct one.
type: 'custom:layout-card'
style:
width: 100%
height: 100%
cards:
- type: history-graph
entities:
- entity: sensor.slaapkamer_temperatuur
- entity: sensor.werkkamer_temperatuur
- entity: sensor.woonkamer_temperature
- entity: sensor.oprit_temperatuur
hours_to_show: 24
refresh_interval: 120
style:
width: 100%
height: 100%
I just get the below graph in the middle of the page at the top.
I simply can’t find how to do this.
Please help me with this probably simple layout.
Edit: note that I already created other nested layouts with the custom-layout-card and the mini-graph-card and all work fine. Just the above doesn’t work for me.
Try this.
views:
- title: Test 3
path: test-3
icon: 'mdi:cat'
layout:
grid-template-columns: 100%
grid-template-rows: auto
panel: false
type: 'custom:grid-layout'
badges: []
cards:
- type: history-graph
entities:
- entity: sun.sun
- entity: sensor.collar_s_box_temperature
- entity: sensor.grey_s_box_temperature
- entity: sensor.dryer_temp_ds18b20_temperature
hours_to_show: 24
refresh_interval: 0
@Amishman: I do not exactly know whether your reply was mean for me, but thanks anyway.
I checked your code and it does not work for me.
I do not have my views in a yaml file so I copied “below” “icon:” into my custom-layout card, with the proper indentation and with my history graphs.
It doesn’t give any errors, but shows a wihite page.
I tried a couple of other options, but either the page remains white or it stays the small centered graph.
Yes, @hvdwolf, I was replaying to you. If I understand what you are trying do, then my code should work for you.
This is what my code displays for me.
The full width stripe is not a problem if I set the view to panel mode and use a vertical stack (the top mini-graphs are then again in a horizontal stack in my vertical stack), I get:
I simply can’t get my center history graph also in full height (of course in another page).
Please open an issue about this on github and I’ll see if I can come up with something.
For some reason I am unable to get a horizontal layout on my phone, it always displays only 1 button per column:
title: Test
type: custom:horizontal-layout
layout:
max_width: 400
max_cols: 4
cards:
- type: custom:button-card
template: light
entity: light.living_spots_rondom
- type: custom:button-card
template: light
entity: light.living_spots_zithoek
- type: custom:button-card
template: light
entity: light.living_tafel
See issue report:
I got this sorted. Unfortunately when placing 3 button cards on 1 row, the middle one is a few pixels smaller than the rest 
@hvdwolf I don’t know the issue I found is the same as yours or not. The grid-template-rows height only can be set for a “true” height width px with first row and other settings will be adjusted by the first row’s “true” height. Providing some samples I tested:
Hi, I am trying to align my dashboard so that I have 2 columns, left side 70%, right 30%, and the cards butt up to each other as in the first pic. This is a masonry layout. If I adjust the width: setting both columns have same width.
I have tried the grid layout, but the results look like this - top right card has same height as top left card.
grid-template-columns: 70% 30%
grid-template-rows: auto
grid-template-areas: |
"main1 side"
"main2 side"
I would prefer to edit via lovelace UI and not to have to use ui-lovelace.yaml
Any help would be great.
Hi. So I have been working on this setup for a while for my living room tablet, moving over from and improving what I had in use from a previous setup with Imperihome. Home assistant is good - even if infinitely more complex, but would not be at all cool enough without custom layout-card, so thanks for that!
I am using a few tricks that may not be done in the best way. The one I am expecting should be easy to do, but have not found the right keyword for (?) is the padding between cards. I have ended up setting it individually using style transforms. Is there a better way?
The other is more hard core. I wanted to get the weather forecast, but not the current weather. As the standard weather forecast card does not have an option to remove the current weather, I ended up shifting out of view with transform, and combining it with a picture. Is there a better way?
The corona-vaccination graph setup is another very ugly hack, which only works on certain size screen, as I have not found a good graph card that could give both both the categories and values. Is there a better way?
…and I have not yet updated to latest version, so my grid is still using the “old” format. That will probably be next task.
type: 'custom:layout-card'
layout: grid
gridrows: 320px auto auto
gridcols: 372px auto 228px
gridgap: 0px
cards:
- type: iframe
url: 'http://[--node-RED--]/fmianim'
aspect_ratio: 85%
style: 'ha-card { height: 100%; z-index: 2; }'
gridrow: 1
gridcol: 1
- type: 'custom:stack-in-card'
style: 'ha-card { transform: scaleY(0.71) translate(0,-89px); }'
gridrow: 1
gridcol: 3
cards:
- type: weather-forecast
style: 'ha-card { transform: translate(0,-126px) scaleY(1.4); z-index: 2; }'
entity: weather.v10
show_forecast: true
- type: picture-entity
card_mod:
style: |
ha-card { transform: translate(0,-36px) scaleY(1.48); z-index: 2;
box-shadow: none;}
entity: camera.fmiuvl10
show_name: false
show_state: false
name: FMI UV
- type: vertical-stack
gridrow: 2
gridcol: 3
cards:
- type: 'custom:clock-card'
style: 'ha-card { transform: translate(0,-4px); }'
size: 215
display_date: DDD D MMM
- type: gauge
style: 'ha-card { transform: translate(0,-4px); }'
entity: sensor.smappee_watts
min: 0
max: 20000
severity:
green: 0
yellow: 7500
red: 15000
- type: 'custom:stack-in-card'
mode: horizontal
style: 'ha-card { transform: translate(0,-4px); }'
cards:
- type: gauge
entity: sensor.smappee_watts_0
name: ' '
style: 'ha-card { transform: scale(1.4); z-index: 2; }'
min: 0
max: 16000
severity:
green: 0
yellow: 5000
red: 10000
- type: gauge
entity: sensor.smappee_watts_1
name: ' '
style: 'ha-card { transform: scale(1.4); z-index: 2; }'
min: 0
max: 16000
severity:
green: 0
yellow: 5000
red: 10000
- type: gauge
entity: sensor.smappee_watts_2
name: ' '
style: 'ha-card { transform: scale(1.4); z-index: 2; }'
min: 0
max: 16000
severity:
green: 0
yellow: 5000
red: 10000
- type: vertical-stack
gridrow: 2
gridcol: 1
cards:
- type: 'custom:apexcharts-card'
style: 'ha-card { transform: translate(0,-2px); z-index: 1; }'
cache: true
apex_config:
chart:
height: 212px
update_interval: 5min
hours_12: false
header:
show: false
title: Network
show_states: true
series:
- entity: sensor.asuswrt_download_speed
name: Download
stroke_width: 2
curve: smooth
group_by:
duration: 5min
func: max
transform: 'return x>100 ? 0 : x;'
- entity: sensor.asuswrt_upload_speed
name: Upload
stroke_width: 2
curve: smooth
group_by:
duration: 5min
func: max
transform: 'return x>10 ? 0 : x;'
- type: picture-elements
style: >-
ha-card { padding-top: 6px; padding-bottom: 6px; transform:
translate(0,-2px); z-index: 1; }
elements:
- entity: binary_sensor.rego_compressor
style:
left: 36.3%
top: 62%
type: state-icon
- entity: binary_sensor.rego_three_way_valve
style:
left: 77%
top: 36.4%
width: 3.7%
type: image
image: /local/img/valve_red_line.png
state_image:
'on': /local/img/valve_water.png
'off': /local/img/valve_radiators.png
- entity: sensor.rego_gt1_radiator_return
style:
left: 64%
top: 11%
type: state-label
- entity: sensor.rego_gt8_heat_fluid_out
style:
left: 70%
top: 69%
type: state-label
- entity: sensor.rego_gt9_heat_fluid_in
style:
left: 70%
top: 82%
type: state-label
- entity: sensor.rego_gt10_cold_fluid_in
style:
left: 16%
top: 57%
type: state-label
- entity: sensor.rego_gt11_cold_fluid_out
style:
left: 16%
top: 82%
type: state-label
- entity: sensor.rego_gt3x_hot_water
style:
left: 88.2%
top: 57%
type: state-label
- entity: sensor.rego_gt6_hot_gas
style:
left: 47%
top: 57%
type: state-label
- entity: sensor.rego_gt5_basement_temp
style:
left: 20%
top: 39%
type: state-label
- entity: sensor.rego_gt2_outdoor
style:
left: 8%
top: 20%
type: state-label
- entity: binary_sensor.rego_additional_heat
style:
left: 59%
top: 50%
type: state-label
image: 'http://[--Home Assistant--]/local/img/BV_3_HA.png'
- type: 'custom:ha-card-weather-conditions'
style: 'ha-card { transform: translate(0,-2px); z-index: 1; }'
language: en
animation: true
weather:
icons_model: defaulthass
current:
sun: sun.sun
- type: entities
entities:
- entity: sensor.netatmo_netatmo_v10_temperature
state_header: Temp
name: Inne
icon: 'mdi:home-import-outline'
type: 'custom:multiple-entity-row'
secondary_info: last-changed
entities:
- entity: sensor.netatmo_netatmo_v10_humidity
name: Humidity
- entity: sensor.netatmo_netatmo_v10_v10_ute_temperature
state_header: Temp
name: Ute
icon: 'mdi:home-export-outline'
type: 'custom:multiple-entity-row'
secondary_info: last-changed
entities:
- entity: sensor.netatmo_netatmo_v10_v10_ute_humidity
name: Humidity
- entity: sensor.netatmo_netatmo_v10_v10_regn_rain_today
type: 'custom:multiple-entity-row'
state_header: Accumulated
name: Regn
secondary_info: last-changed
icon: 'mdi:weather-rainy'
entities:
- entity: sensor.netatmo_netatmo_v10_v10_regn_rain
name: Rate
unit: mm/h
format: precision1
- entity: sensor.netatmo_netatmo_v10_pressure
name: Lufttryck
- entity: sensor.hsy_aqi_leppavaara
name: Luftkvalitetsindex
icon: 'mdi:chart-line'
type: 'custom:multiple-entity-row'
state_header: Alberga
secondary_info: last-changed
- entity: sensor.netatmo_netatmo_v10_co2
name: Luftkvalitet inne
show_header_toggle: false
gridrow: 1
gridcol: 2
- type: vertical-stack
gridrow: 2
gridcol: 2
cards:
- type: 'custom:apexcharts-card'
style: 'ha-card { transform: translate(0,-4px); }'
experimental:
disable_config_validation: false
graph_span: 59y
span:
start: year
card_mod: null
apex_config:
chart:
height: 194px
xaxis:
type: datetime
labels:
datetimeUTC: true
datetimeFormatter:
year: yy
month: ''
day: ''
hour: ''
minute: ''
header:
show: true
title: Esbo Vaccinerade
show_states: true
colorize_states: true
series:
- entity: sensor.thl_vaccinerade_esbo_dos1
type: column
name: Totalt 1 dos
unit: ' %'
stroke_width: 5
data_generator: |
const now = new Date();
const data = [];
for(let i = 2; i <= 15; i++) {
data.push([1735682400000 + (i-3) * 1000 * 60 * 60*24*365*5.04, entity.attributes.dataset.value[i]])
}
return data;
- entity: sensor.thl_vaccinerade_esbo_dos2
type: column
name: Totalt 2 doser
unit: ' %'
stroke_width: 5
data_generator: |
const now = new Date();
const data = [];
for(let i = 2; i <= 15; i++) {
data.push([1735682400000 + (i-3) * 1000 * 60 * 60*24*365*5.04, entity.attributes.dataset.value[i]])
}
return data;
- type: 'custom:stack-in-card'
card_mod:
style: |
ha-card {
padding-top: 11px; padding-bottom: 11px;
transform: translate(0,-4px); z-index: 1;
}
mode: horizontal
cards:
- type: glance
state_color: true
card_mod:
style: |
ha-card {
box-shadow: none;
}
entities:
- entity: sensor.tuya_bilvarme_combined
name: Bilvärme
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.bf82b3f61424d6ac03tnst
- entity: sensor.pindora_hem_time
name: Huvuddörr
- entity: sensor.pindora_garage_time
name: Garage
I use Visual Studio Code to edit yaml files, and it alerts when I try to do something not allowed. The code below seems to work, but VSC shows errors
I would assume this is a VSC problem, except I have thousands of lines of code and these are the only ones flagged
Is this code okay? If so, does anyone here know how to educate VSC?
Cheers, Richard
- title: System
badges: []
path: system
icon: 'mdi:cog'
type: custom:vertical-layout **Property type is not allowed.**
layout: **Property layout is not allowed**
width: 800
Try this:
- title: System
badges: []
path: system
icon: 'mdi:cog'
layout_type: custom:vertical-layout
layout:
width: 800
Thanks, but that’s worse. It continues to show errors in VSC, but changes the resulting width from the desired 800 back to standard width.
I’ve also tried:
path: system
cards:
- type: custom:layout-card
layout_type: custom:vertical-layout
layout:
width: 800
cards:
That stops showing errors, but as one would expect, the resulting width is not 800
To reiterate, the original code works, but simply shows errors in VSC, so maybe that’s only an aesthetic issue
There is this open issue and another one where i suggested a filter to exclude files from schema validation in the VSC extension.
Yeah sorry, I actually got my reading mixed up… May code is incorrect.