šŸ”¹ Layout-card - Take control of where your cards end up

probably no difference there, I havenā€™t changed any of the existing code, just added support for grid-area(s) css properties and responsiveness

Maybe this is of use: šŸ”¹ Card-mod - Add css styles to any lovelace card

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.

Iā€™ve removed the margins in my fork, havenā€™t tested much but seems to work.

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 :frowning: 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.