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.
Do you have some news about the implementation of your work in the original card?
No, havenĀ“t got any reaction to the Github PR. Now, I sometimes also visit the Home Assistant Discord server and notice that Thomas is quite busy helping out on the lovelace frontend development, so I guess most of his time is focused on that and less on the custom cards.
Responsive grid layouts should become a standard feature at some point is what I gather from the developerās comments in this topic, but will take some time.
1 Like
tried to follow the instructions (removed margins, deleted .gz file, cleared cache, reloaded) but no change. Scrollbars are still there 
Tested in few browsers/systemsā¦
Yes the scroll bars never went for me either by doing that.
The only way I found to get rid of them was to NOT use grid layout at all!
As I previously said I converted my grid layout views to nested vertical and horizontal layouts within card_mod as per Thomasās post number 89 in this thread.