you can use my fork, linked to in the post just above yours. Iāve made it easy to define a responsive grid layout, example code is available in the readme.
Iāve read in a WTH post that native support for this will come to lovelace at some point, but untill thenā¦
I think youāre correct about some native support.
It is implied in this.
Thanks friend
@kdw2060
Does your fork re-instate the top and side margins that suddenly disappeared with HA 0.116.x ?
My grid layout views have horizontal and intermittent vertical scroll bars now which do not go away if the browser is maximised or zoomed out. Tried this on Edge and Chrome, both are the same.
probably no difference there, I havenāt changed any of the existing code, just added support for grid-area(s) css properties and responsiveness
Hi,
Thanks, will definitely look into that.
Never thought to look in the card-mod discussion as my issue is only with grid views.
1 Like
you can get the padding back by modifying layout-card.js and changing the padding for :host in get_styles() from 0 to whatever you want (5px seems to work pretty well for me), and then reloading HA.
`}static get styles(){return r`
:host {
padding: 0;
display: block;
margin-bottom: 0!important;
the only thing iām having an issue with here is that itās causing issues on nested layout cards (it adds the padding on every one, so nested ones have too much padding). still working on getting it to only add the padding on the top levelā¦
Hi,
That didnāt solve my grid layout problem but thanks for the pointer.
Hi,
Thanks.
I can see the effects but the scrollbars are still there. Its weird that this just manifested itself with 0.116.x
There are a couple of others that have the same issue. thereās an issue posted on github for it.
thatās odd, i donāt have any scrollbar issues even without the marginsā¦
Do you use grid layouts.
I only have the scrollbar issues with these. My native lovelace view only has the vertical scrollbar as I would expect as it is a big view. But that doesnāt have the horizontal scrollbar. My other layout-card view is a standard 2 column vertical view and this doesnāt have any scrollbars at all.
So it is layout-card grid layout problem as far as I can see and it only manifested itself with HA 0.116.x
But if you use grid layouts and you donāt have this issue then I am at a loss as I havenāt change anything in my lovelace yaml but all of a sudden scrollbars.
I have this with Chrome and Edge on my PC and Chrome and Edge and Silk on my amazon tablet,
that would explain it, i missed the part about you using grids. i do not, i have standard vertical layout that i put breaks in manually.
In panel-mode with layout-card I also got scrollbars after updating to 0.116.2.
if you change the margins to 0px the scroll bars are gone
#columns { display: flex; flex-direction: row; justify-content: center; margin-top: -8px; }
.column:first-child { margin-left: -4px; }
.column:last-child { margin-right: -4px; }
Hi,
Thanks for the response.
Glad there are other people having issues with 0.116.2 and layout card.
Unfortunately editing the layout-card.js file as you suggested didnāt solve my issue.
So either I am doing something wrong or I am not explaining the issue properly.
My layout-card.js is in config\www\community\lovelace-layout-card\
Is this the correct location? So I edit the file as you suggested, saved it back and the restarted HA.
I see no difference.
I use layout-card in panel-mode in a grid layout. I see, since 0.116.x, a horizontal scroll bar in these views ( but not in the standard lovelace generated view or my layout-card vertical view with 2 columns). I also see an intermittent vertical scrollbar in my grid views which causes the whole view to āflickerā or " wobble" making it difficult to use. This manifests itself on all browsers Iāve tried and it doesnāt matter if the browser is maximised, the bars are still there so it is not a zoom issue.
if there is a compressed js (layout-card.js.gz) you need to edit this file.
Or you can try it out by changing it in the developer mode of your web browser (e.g chrome inspect and search for the css #columns and .column:ā¦ elements)
That explains it. I do have the Gzip file but even then after editing the scroll bars remain in my grid views
I have solved it by making my grid layout views into nested layout-cards with vertical and horizontal views as Thomas suggested in post #89
Thanks for everyoneās input.
Hello , My Layout-card missing after page refresh. Can you help me?
cards:
- decimals: 1
entities:
- entity: sensor.livingroom_temp_temperature
index: 0
hour24: true
hours_to_show: 24
line_color: red
points_per_hour: true
type: 'custom:mini-graph-card'
- decimals: 1
entities:
- entity: sensor.bedroom_temp_temperature
index: 0
hour24: true
hours_to_show: 24
line_color: green
points_per_hour: true
type: 'custom:mini-graph-card'
- decimals: 1
entities:
- entity: sensor.bme280_temperature
index: 0
hour24: true
hours_to_show: 24
line_color: blue
name: Outside Temp
points_per_hour: true
type: 'custom:mini-graph-card'
- entities:
- entity: sensor.processor_use
- entity: sensor.memory_use_percent
- entity: sensor.disk_use_percent_home
type: entities
- entities:
- entity: person.qsk
- entity: binary_sensor.door_sensor_contact
- entity: binary_sensor.water_leak_water_leak
- entity: binary_sensor.motion_sensor_occupancy
- entity: binary_sensor.camera_motion
show_header_toggle: false
type: entities
- entities:
- entity: sensor.miflora_soil_conductivity
- entity: sensor.miflora_illuminance
- entity: sensor.miflora_moisture
- entity: sensor.miflora_temperature
show_header_toggle: false
title: Tomato
type: entities
layout: horizontal
max_columns: 3
type: 'custom:layout-card'
1 Like
same is happening here.