Layout-break doesn't cause a column break in HA 2024.6 #291

wheindl · 2024-06-06T00:50:38Z

My Home Assistant version: 2024.6

Layout-card version v2.4.5

What I am doing: Just updated to 2024.6 (on two different HA instances). The layout-break card no longer creates a column break; all cards appear in a single column. The dashboard is set to Vertical (layout-card).

What I expected to happen: The two or three columns in my dashboards would all continue to render as previously.

What happened instead: All cards appear in a single column.

Minimal steps to reproduce: Upgrade to HA 2024.6 and clear cache.

# The least ammount of code possible to reproduce my error

title: Cameras
path: cameras
theme: ios-light-mode-blue-red-alternative
type: custom:vertical-layout
layout:
  width: 400
  max_width: 1000
  max_cols: 2
badges: []
cards:
  - type: vertical-stack
    cards:
  *   *    *
  - type: custom:layout-break

# End of code

Error messages from the browser console:

By putting an X in the boxes ([X]) below, I indicate that I:

Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
Have made sure I am using the latest version of the plugin.
Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

J-o-h-n-M · 2024-06-06T06:26:39Z

Just spend some time understanding why my Google Nest Hub had a strange layout. And indeed it boiled down to the layout-break being ignored.

snigehere · 2024-06-06T06:57:33Z

I have the same issue - I didn't see anything in breaking changes for this

terriblefox · 2024-06-06T07:11:33Z

Same her since the lates update of HA. No layout break anymore.

Leen15 · 2024-06-06T08:35:55Z

Same here

Motik68 · 2024-06-06T11:29:27Z

Seems to still be the same bug as #288.

It is possible to restore the multi-column layout by editing the YAML of the tab as indicated there:

changed:

type: custom:vertical-layout
layout:
  max_cols: 3

to:

type: custom:layout-card
layout_type: custom:vertical-layout
layout:
  max_cols: 3

and it works again.

BUT... Then, when switching the tab to edit mode, the "Modify" buttons no longer appear and actually editing any card becomes impossible.

Leen15 · 2024-06-06T12:57:35Z

BUT... Then, when switching the tab to edit mode, the "Modify" buttons no longer appear and actually editing any card becomes impossible.

I really hope a better solution will be find 🤞

snigehere · 2024-06-06T13:16:56Z

I have gone back to 2024.5.5 as I have this layout in 95% of my UI .... I did stare at the source code for 2 seconds then quickly closed it again ... hoping someone with understanding of how it works can fix it ...

3shirts · 2024-06-06T16:29:33Z

Same issue here. I love this plugin because it's so simple to use so getting into the weeds to resolve it myself really isn't appealing!

arboeh · 2024-06-06T19:40:05Z

Same issue since upgrading core to 2024.6

ferreto1978 · 2024-06-06T20:06:53Z

Same here. Updated to 2024.6 and no more breaks as a result. Reverted to 2024.5 which "fixed" it.

mnneely · 2024-06-06T20:06:58Z

I tried grid layouts and combinations of vertical stacks within horizontal stacks, but nothing reproduced the simplicity and clean function of the layout-break card. Like a lot of others, I eagerly await a fix to this incredibly useful and vital frontend.

trisweb · 2024-06-07T00:26:36Z

I also experience this issue after upgrading to 2024.6. What is the path to resolving it correctly? Is this project still maintained?

It looks like it could be a schema update similar to 0fb56a5#diff-a9f216053d8c15e87ef3962bae2f028ca9730c2bb9b5b669bd5e0e044ed18364L13 - which would explain why manually adding the layout_type key forces it to work (supposed to be automatically appended via the code above).

larryb31 · 2024-06-07T07:37:50Z

Same..

HJ57 · 2024-06-07T08:38:34Z

Same here.
You only know what it's worth if you have to miss it.....
:-(

kloodhu · 2024-06-07T11:17:03Z

same

hellomarb · 2024-06-07T13:05:07Z

Yes it's broken and setting layout_type: custom:vertical-layout isn't working for me on views.

trisweb · 2024-06-07T15:54:52Z

I went ahead and copy-pasted my dashboards to the new Drag and Drop dashboard layout, and it works quite well with similar Column concepts.

This spells the end of the road for Layout Card for me, and I expect due to the new layout tools, there will be decreasing need for it in the future. Maybe not time for everyone, but for me it works.

Thanks for all the fish. Cheers.

3shirts · 2024-06-07T16:18:01Z

I went ahead and copy-pasted my dashboards to the new Drag and Drop dashboard layout, and it works quite well with similar Column concepts.

This spells the end of the road for Layout Card for me, and I expect due to the new layout tools, there will be decreasing need for it in the future. Maybe not time for everyone, but for me it works.

Thanks for all the fish. Cheers.

Yep. I transferred one of my views to a "Sections" type today and it works great plus displays more consistently across devices for me. I think I'll probably be doing the rest of my views when I have time and then bin this.

mnneely · 2024-06-07T17:10:16Z

Ironically, I just did the same this morning. The Sections capability is good. I hope they make the ability to expand the width of certain cards (e.g. entity, button) to the whole section. I have several Mushroom Template cards that are assigned to two columns in a section row, which I would prefer to take up the whole row given the information they contain.

With layout-card:

With Sections:

mnneely · 2024-06-07T17:25:12Z

Just found a work around. Add a vertical stack to the Section that contains the cards you want to occupy a whole row.

3shirts · 2024-06-07T18:03:02Z

Ironically, I just did the same this morning. The Sections capability is good. I hope they make the ability to expand the width of certain cards (e.g. entity, button) to the whole section. I have several Mushroom Template cards that are assigned to two columns in a section row, which I would prefer to take up the whole row given the information they contain.

Change the layout type on the card from "default" to either horizontal or vertical, then it will fill the whole row. I had the same issue at first.

snigehere · 2024-06-07T21:42:02Z

The worry with the section approach is the experimental nature of the feature.. if I switch all my dashboards over I may get issues in a later release if they have to change the architecture ....

piitaya · 2024-06-07T22:27:37Z

You can customize the width and the height on the card using yaml in section card. We are looking to bring that to the UI.
This feature is not documented yet because it's experimental and may change (although I don't think that will change 😅)

layout_options:
   grid_rows: 4         # number of row for your card in the grid
   grid_columns: 4      # number of column for your card in the grid

piitaya · 2024-06-07T22:35:18Z

With 2024.6 card are now wrapped with a hui-card so the layout card needs to support that.

arboeh · 2024-06-08T06:31:34Z

I guess the issue still exists with core 2024.6.1 that has been released 12h ago..?

Leen15 · 2024-06-08T09:59:07Z

I moved to a grid-layout, it works as expected without using layout-break card and I can still use UI to edit elements.

title: Home
views:
  - title: Home
    theme: Mushroom Shadow
    icon: mdi:home
    type: custom:grid-layout
    layout:
      grid-template-columns: 33% 33% 33%
      grid-template-rows: auto
      grid-gap: 10px
      padding: 0 5px
    cards:
      - type: vertical-stack
        cards:
          [...]
      - type: vertical-stack
        cards:
          [...]
      - type: vertical-stack
        cards:
          [...]

J-o-h-n-M · 2024-06-08T10:07:45Z

I moved to a sections layout, was planning on this anyway and I am really happy I did. So much more flexibility

snigehere · 2024-06-08T17:04:06Z

much typing later .... 20 dashboards on two systems converted from using custom layout (only ever used the break capability of the card) to sections .. I now have to hope they don't change the section approach in a later release as it becomes final rather than experimental...

A couple of issues with cards that have coding to not show if there is nothing to show - alexa timers and waste collection - no solution to these yet so a white space gap in the UI when they have nothing to display

trisweb · 2024-06-08T23:10:59Z

For those migrating to a Sections layout, you can actually adjust the yaml to convert your existing layout-card dashboard to a sections one, despite it warning you that migration is not supported.

First, I recommend backing up your dashboards entirely before you begin (hit edit, then click the ••• and pick "Raw configuration editor," then copy all into a backup file).

To do this:

Edit your dashboard, then click the Edit pencil on the dashboard itself, then the ••• in the popup, then choose "Edit in YAML"
Change type: custom:vertical-layout to type: sections
Remove badges: []
Add max-columns: 3 (or your preference)
Above the 'cards' key, add a couple new lines:
```
sections:
  - type: grid
```

Indent the existing 'cards' and everthing below it, to line up with the t in 'type', so it looks like, for ex:

sections:
  - type: grid
    cards:
      - type: entities
        entities:
          - entity: light.living_room_lights
          - entity: light.dining_room_light
          ...

Now, you can either save it, making all of your cards flow into one column (where you can then drag them around in the UI)... or, you can add the other columns manually, wherever you had a - type: custom:layout-break line.

In place of the - type: custom:layout-break line, add the following two lines to make a new column, reducing the indentation by two levels to make the things under 'cards:' line up properly.
```
- type: grid
  cards:
```
And the remaining cards go underneath the cards: key as with the first column.

If you don't want to do this part, you can skip this step and just use the UI to make new columns and drag cards into them.

This made the migration much faster for me, but of course using copy-paste isn't so bad either if you can't do this.

pcb1962 · 2024-06-10T16:09:53Z

Have you cleared the browser cache? Most HA interface changes seem to require that.

andbad · 2024-06-10T16:41:28Z

hmm .. I am clearly doing something wrong, or I misunderstand what's needed, or I am just poking around in teh darkness with no idea what I am doing .. any are possible.

I am using the the custom vertical layout card.

Initially I just switched out the .js and restarted HA but that didn't solve the break issue for me. I then removed Thomas's version from my system, used Paul's fork url and installed as a custom repository ... code is all updated as of todays data so its installed ok however still break is not being handled

In "Resources" add "?v=1" after "layout-card.js"
Something like:
/local/layout-card.js?v=1

Then reload frontend clearing the cache (you can do this with SHIFT+F5 key, or clicking on refresh page icon on the browser while press SHIFT key). Or clear all web browser cache.

By(t)e

snigehere · 2024-06-10T16:43:18Z

Have you cleared the browser cache? Most HA interface changes seem to require that.

Thanks - I had not but now have .. restarted the browser after clearing as well but it didn't fix it .. tried Edge which I rarely use and I see the same issue

So I started a fresh dashboard and set a view and set view type as vertical (layout card) .. I added a couple of cards and a break but it still all showed in one column....

views:
  - title: Home
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: light.garden_lights
      - type: custom:layout-break
      - type: gauge
        entity: sensor.red_freezer_energy_hourly
    type: custom:vertical-layout

I think I will go and lay down for a while...

snigehere · 2024-06-10T16:53:37Z

Thanks @andbad ... sorry to be thick - I am not familiar with url formats - I already have a hacs tag after the .js - is that just another with a ? or is there a separator I need to use?
eg
/hacsfiles/lovelace-layout-card/layout-card.js?v=1?hacstag=62215851516834
or a separator like an & between the hasctag and v=1?
/hacsfiles/lovelace-layout-card/layout-card.js?v=1&hacstag=62215851516834

andbad · 2024-06-10T17:53:37Z

Thanks @andbad ... sorry to be thick - I am not familiar with url formats - I already have a hacs tag after the .js - is that just another with a ? or is there a separator I need to use? eg /hacsfiles/lovelace-layout-card/layout-card.js?v=1?hacstag=62215851516834 or a separator like an & between the hasctag and v=1? /hacsfiles/lovelace-layout-card/layout-card.js?v=1&hacstag=62215851516834

I don't know how works hacstag, but I think you should use "&" as separator, like your second example.

By(t)e

piitaya · 2024-06-10T18:49:59Z

My PR doesn't include the built file because it must not be included in PR. So, adding my fork into hacs will not work.

You have to use this file #291 (comment)

snigehere · 2024-06-10T19:21:28Z

@piitaya Thanks Paul - so the answer "I am just poking around in the darkness with no idea what I am doing" was actually the correct choice. The first thing I tried was to just replace the file however that didn't do it so I tried other steps .. what I neglected, and @pcb1962 reminded me, was to clear cache after replacing the file .... but by then I had already moved on to try other things so missed the eureka moment ... Based on your post I went back to just replacing the file, then cleared cache, and all was back to working, Many thanks for your work on this very useful card.

I did try out sections but they didn't work for my family dashboard landing page as I have quite a few conditional cards designed to hide stuff not in use so as to keep the dashboard as compact as possible .. hiding sections didn't work as it maintained the grid and conditional cards were not playing well on my android 5.01 tablet fixed to the kitchen wall.

larryb31 · 2024-06-11T09:17:39Z

All working with the ha-section-grid-row-... variables, thanks all!

Montreal666 · 2024-06-12T00:43:32Z

There are several theme variables available for section view. That should fix your theme issues 🙂

Max width of a section: ha-view-sections-column-max-width (default: 500px)

Min width of a section: ha-view-sections-column-min-width (default: 320px)

Horizontal gap between sections: ha-view-sections-column-gap (default: 32px)

Vertical gap between sections: ha-view-sections-row-gap (default: 8px)

Horizontal gap between cards within a section: ha-section-grid-column-gap (default: 8px)

Vertical gap between cards within a section: ha-section-grid-row-gap (default: 8px)

I added this to my theme but doesn't seem to work despite empty cache/hard reload
( still get large gaps between cards within a section )

my-custom-theme:

  ha-section-grid-column-gap: 2px;
  ha-section-grid-row-gap: 2px;

Edit: found the problem, there seem to be a minimum height of 65px per card (see below); can this be changed with theme variables as well?

iptvcld · 2024-06-12T04:56:29Z

I am trying to convert my layout to Sections as well but I am seeing large gaps going horizonal and vertically - is there a way i can adjust these?

iptvcld · 2024-06-12T05:17:49Z

I went ahead and copy-pasted my dashboards to the new Drag and Drop dashboard layout, and it works quite well with similar Column concepts.
This spells the end of the road for Layout Card for me, and I expect due to the new layout tools, there will be decreasing need for it in the future. Maybe not time for everyone, but for me it works.
Thanks for all the fish. Cheers.

Yep. I transferred one of my views to a "Sections" type today and it works great plus displays more consistently across devices for me. I think I'll probably be doing the rest of my views when I have time and then bin this.

Sections is still listed as experimental, maybe don’t invest all the time into that view yet. Does look really nice and easy to manage though.

igorsantos07 · 2024-06-12T05:37:39Z

I mentioned the --row-height: 66px issue in this comment, and it also affects Mushroom chips.

@Montreal666, so far it doesn't seem there's a way to configure that value.

@iptvcld, you can create a custom theme and use in the dashboard, using these variables posted earlier. This will solve all issues, except the vertical spacing you see below short cards.

As a summary, given I also had some hiccups trying to create my own theme as well:

create a yaml file under themes/whatever-you-name-it.yaml, like this (Thin sections is the theme name in this example):

# origin: https://github.com/thomasloven/lovelace-layout-card/issues/291#issuecomment-2156524817
Thin sections:
    ha-view-sections-column-max-width:  500px   #default: 500
    ha-view-sections-column-min-width:  320px   #default: 320
    ha-view-sections-column-gap:        32px    #default: 32
    ha-view-sections-row-gap:           8px     #default: 8
    ha-section-grid-column-gap:         8px     #default: 8
    ha-section-grid-row-gap:            8px     #default: 8

make sure you have something similar to this in your configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes

reboot your instance if you had to change configuration.yaml
if you didn't reboot, or if you made further changes to the theme, you'll need to go to Developer Tools > Services and call frontend.reload_themes. That would refresh all themes, without the need for you to press F5 on the pages. Don't forget to select the theme in the Dashboard, Tab or Card. @Montreal666, that's probably what you missed that made the theme change not reflect in the UI.

Good luck!

boehser-enkel · 2024-06-12T07:01:57Z

So i edited the yaml to:

type: custom:layout-card
layout_type: custom:vertical-layout

replaced the layout-card.js and cleared the cache.
The view is now okay but the edit buttons for the dashboard elements are still missing.
Did i miss something?

snigehere · 2024-06-12T07:15:32Z

Adding the layout type was a work around but caused the edit button issue. The fix in the .js file made it all work again so you don't need layout type in the yaml ... but remember to clear browser cache after replacing the .js file

iptvcld · 2024-06-12T15:26:26Z

vertical spacing you see below short card

Thank you; this worked and yes as for the vertical spacing for short cards - that still remains, any cool header ideas you have? Also is this the time to jump ship and and use sections? Or is it too early?

igorsantos07 · 2024-06-12T19:12:22Z

@iptvcld no cool ideas, unfortunately haha

I've so far moved my main dashboard to Sections, with tweaks to the custom theme I posted, converting with trisweb's guide (#291 (comment)). Those issues seem minor to me and should be fixed in the near future. It feels better than using custom code from developers (even from someone as dedicated as Thomas, it's prone to break since it's not tested together with the HA releases); and drag-and-drop is a bliss as well.

iptvcld · 2024-06-12T20:24:46Z

@iptvcld no cool ideas, unfortunately haha

I've so far moved my main dashboard to Sections, with tweaks to the custom theme I posted, converting with trisweb's guide (#291 (comment)). Those issues seem minor to me and should be fixed in the near future. It feels better than using custom code from developers (even from someone as dedicated as Thomas, it's prone to break since it's not tested together with the HA releases); and drag-and-drop is a bliss as well.

Yeah the drag and drop is a cool feature and also being able to add columns by dragging a slider is neat. Looks like I will start copy and pasting my cards over to new Sections views as it cannot be migrated.

500Foods · 2024-06-12T20:34:09Z

Yeah the drag and drop is a cool feature and also being able to add columns by dragging a slider is neat. Looks like I will start copy and pasting my cards over to new Sections views as it cannot be migrated.

If you look back through this thread, there are steps to migrate manually. I did this with a dashboard with dozens of complex cards and it only took about five minutes. Super happy with the result. Note that for the bit about having to indent everything (thousands of lines in my case) you can just highlight the text and hit tab (twice here) to make quick work of it.

Landshark77 · 2024-06-22T12:20:08Z

is this mod even still being maintained??

igorsantos07 · 2024-06-22T16:08:46Z

I guess Thomas took a break from GitHub life... The PR from Piitaya #293 is up for grabs for two weeks already.

nathan951 · 2024-06-22T19:53:12Z

So I moved over to 'sections' because of this issue. But now I have another small problem. I'm getting a 2 column view on smaller widths (tablets), BUT I really want 3 columns. How do I do that?

From this:

To this:

Here's what my header of this section looks like:

`type: sections
max-columns: 3
background: var(--background-image)
title: Home
wallpanel:
fullscreen: true
enabled: true
hide_toolbar: true
hide_sidebar: true
idle_time: 0
black_screen_after_time: 300
views:

type: sections
max_columns: 3
subview: false
sections:
- type: grid
  layout: null
  width: 200
  cards:
  - graph: line
    type: sensor
    entity: sensor.pool_temperature
    detail: 2
    hours_to_show: 48
  - graph: line
    type: sensor
    entity: sensor.openweathermap_forecast_temperature
    detail: 2
    hours_to_show: 48
    name: Ouside Temp
  - type: horizontal-stack`

skank01 · 2024-06-28T10:33:56Z

Wow lots of comments here, whats the proper way now?

pcb1962 · 2024-06-28T12:04:51Z

The 'proper' way is for Thomas to accept the PR and produce a new release.
Easiest thing to do right now is is to replace your layout-card.js with one of those created by @hellomarb or @sdrapha.
Otherwise it's up to you to use one of the migration strategies posted above to eliminate your dependency on layout-card.

skank01 · 2024-06-28T18:06:09Z

Thank you, works again !

raytedjaja · 2024-07-07T08:15:19Z

still waiting on 2024.5 release

N3orun · 2024-08-07T22:42:44Z

The 'proper' way is for Thomas to accept the PR and produce a new release. Easiest thing to do right now is is to replace your layout-card.js with one of those created by @hellomarb or @sdrapha. Otherwise it's up to you to use one of the migration strategies posted above to eliminate your dependency on layout-card.

Could you specify what i have to do? - sorry noobie here.

Nyxtorm · 2024-08-10T16:07:14Z

Thank you, it works again with https://github.com/sdrapha/lovelace-layout-card/blob/fix_break_card_ha_2024.6/layout-card.js. 👍
Don't forget to replace file in layout-card.js.gz as well (or maybe just remove this gz file), and increase version in resource URL.

craigmcfly · 2024-08-28T14:37:56Z

Any news on this? I've had to remove the layout-card from my dashboard and just let HA decide where things go, because any layout-card I create just gets put under the existing cards and I have to scroll down on my screen to see everything.

hellomarb · 2024-08-28T15:05:00Z

Use one of the working layout-card.js files in this post or from the pr (#293) and it is working again.

piitaya mentioned this issue Jun 7, 2024

Latest beta series 2024.6.xx appears to worsen the issue where vertical stacks appear below each other instead of side-by-side home-assistant/frontend#20991

Closed

4 tasks

mastria mentioned this issue Aug 1, 2024

Is the layout-break... broken? #290

Open

4 tasks

Layout-break doesn't cause a column break in HA 2024.6 #291

Layout-break doesn't cause a column break in HA 2024.6 #291

Comments

wheindl commented Jun 6, 2024

J-o-h-n-M commented Jun 6, 2024

snigehere commented Jun 6, 2024

terriblefox commented Jun 6, 2024

Leen15 commented Jun 6, 2024

Motik68 commented Jun 6, 2024

Leen15 commented Jun 6, 2024 • edited Loading

snigehere commented Jun 6, 2024

3shirts commented Jun 6, 2024 • edited Loading

arboeh commented Jun 6, 2024

ferreto1978 commented Jun 6, 2024

mnneely commented Jun 6, 2024

trisweb commented Jun 7, 2024 • edited Loading

larryb31 commented Jun 7, 2024

HJ57 commented Jun 7, 2024

kloodhu commented Jun 7, 2024

hellomarb commented Jun 7, 2024

trisweb commented Jun 7, 2024

3shirts commented Jun 7, 2024

mnneely commented Jun 7, 2024

mnneely commented Jun 7, 2024

3shirts commented Jun 7, 2024

snigehere commented Jun 7, 2024

piitaya commented Jun 7, 2024

piitaya commented Jun 7, 2024

arboeh commented Jun 8, 2024 • edited Loading

Leen15 commented Jun 8, 2024 • edited Loading

J-o-h-n-M commented Jun 8, 2024

snigehere commented Jun 8, 2024

trisweb commented Jun 8, 2024 • edited Loading

pcb1962 commented Jun 10, 2024

andbad commented Jun 10, 2024

snigehere commented Jun 10, 2024

snigehere commented Jun 10, 2024

andbad commented Jun 10, 2024

piitaya commented Jun 10, 2024

snigehere commented Jun 10, 2024

larryb31 commented Jun 11, 2024

Montreal666 commented Jun 12, 2024 • edited Loading

iptvcld commented Jun 12, 2024 • edited Loading

iptvcld commented Jun 12, 2024

igorsantos07 commented Jun 12, 2024 • edited Loading

boehser-enkel commented Jun 12, 2024

snigehere commented Jun 12, 2024 • edited Loading

iptvcld commented Jun 12, 2024

igorsantos07 commented Jun 12, 2024 • edited Loading

iptvcld commented Jun 12, 2024

500Foods commented Jun 12, 2024

Landshark77 commented Jun 22, 2024

igorsantos07 commented Jun 22, 2024

nathan951 commented Jun 22, 2024

skank01 commented Jun 28, 2024

pcb1962 commented Jun 28, 2024

skank01 commented Jun 28, 2024

raytedjaja commented Jul 7, 2024

N3orun commented Aug 7, 2024

Nyxtorm commented Aug 10, 2024

craigmcfly commented Aug 28, 2024

hellomarb commented Aug 28, 2024

Leen15 commented Jun 6, 2024 •

edited

Loading

3shirts commented Jun 6, 2024 •

edited

Loading

trisweb commented Jun 7, 2024 •

edited

Loading

arboeh commented Jun 8, 2024 •

edited

Loading

Leen15 commented Jun 8, 2024 •

edited

Loading

trisweb commented Jun 8, 2024 •

edited

Loading

Montreal666 commented Jun 12, 2024 •

edited

Loading

iptvcld commented Jun 12, 2024 •

edited

Loading

igorsantos07 commented Jun 12, 2024 •

edited

Loading

snigehere commented Jun 12, 2024 •

edited

Loading

igorsantos07 commented Jun 12, 2024 •

edited

Loading