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

wheindl commented 5 months ago

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:

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] 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 commented 5 months ago

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 commented 5 months ago

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

terriblefox commented 5 months ago

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

Leen15 commented 5 months ago

Same here

Motik68 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

Same issue since upgrading core to 2024.6

ferreto1978 commented 5 months ago

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

mnneely commented 5 months ago

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 commented 5 months ago

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 https://github.com/thomasloven/lovelace-layout-card/commit/0fb56a571a7b82d87827ab700636ab9a80dfbd14#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 commented 5 months ago

Same..

HJ57 commented 5 months ago

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

kloodhu commented 5 months ago

same

hellomarb commented 5 months ago

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

trisweb commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

3shirts commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

arboeh commented 4 months ago

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

Leen15 commented 4 months ago

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 commented 4 months ago

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

snigehere commented 4 months ago

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 commented 4 months ago

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.

snigehere commented 4 months ago

Many thanks for sharing ... i did similar on a couple of cards but for most of mine I found it easier to open each card in yaml one by one on the old dashboard and then add the card as manual in the section and paste the code in.. i found this quicker on more complex cards where there were lots of code lines and multiple views on the same dashboard .. adding 4 spaces on each row with copy paste got a bit tedious!!

500Foods commented 4 months ago

That's good to know. The main thing holding me back from Sections is that I've not been able to figure out how to increase the width of a section (or all sections, doesn't have to be per-section, though that would be nice as well). Maybe I'm overlooking something obvious?

Also, when editing YAML, if you highlight a bunch of lines (or several thousand lines...) you can hit tab to indent it all two spaces, twice for 4 spaces which is what we need here, making quick work of the above. I was able to recreate my substantial dashboard using Sections following the above steps in only a few minutes! And be able to drag stuff around is great.

Just that they're not as wide as they need to be 😦 And if someone knows how to address that, maybe they also know how to adjust the gap between sections? That'd be handy too.

larryb31 commented 4 months ago

I copied/pasted everything into a Sections dashboard. I set up my 3 columns as before, but I'm missing the width element that I used for a 7' tablet, I had:

width: 320
max_cols: 3
card_margin: 1px 7px 6px

Now I'm getting only 2 columns with the 3rd appearing under the first. On my desktop I see 3 columns. Is there a way to use percentages or something for this new Sections view?

piitaya commented 4 months ago

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

I open a PR to fix the issue: https://github.com/thomasloven/lovelace-layout-card/pull/293

That's good to know. The main thing holding me back from Sections is that I've not been able to figure out how to increase the width of a section (or all sections, doesn't have to be per-section, though that would be nice as well). Maybe I'm overlooking something obvious? Just that they're not as wide as they need to be 😦 And if someone knows how to address that, maybe they also know how to adjust the gap between sections? That'd be handy too.

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)

J-o-h-n-M commented 4 months ago

Now I'm getting only 2 columns with the 3rd appearing under the first. On my desktop I see 3 columns. Is there a way to use percentages or something for this new Sections view?

I had the same, I was only seeing 2 columns, the reason is that the space between the columns when using Sections is too big. I reduced it by adding this line to my themes yaml file: ha-view-sections-column-gap: 5px

hellomarb commented 4 months ago

@piitaya Fantastic, I tested the PR and the layout-break is working again, thank you!

larryb31 commented 4 months ago

Where do I add the ha-view-sections-.. variables in the yaml - to the dashboard raw config? what if I'm not using a theme?

piitaya commented 4 months ago

Where do I add the ha-view-sections-.. variables in the yaml - to the dashboard raw config? what if I'm not using a theme?

You have to create a theme to add these variables. You can create one with these variables only.

500Foods commented 4 months ago

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`)

Absolutely fantastic! Thanks very much. I created a new theme by copying the contents of a Mushroom theme to a new file. And then just plunked in the values I wanted to change at the bottom.

Pintura Wide:
    # Home Assistant override
    ha-card-border-radius: 6px
    # Layout
    mush-spacing: 8px
    # Elements
    mush-icon-border-radius: 6px
    mush-control-border-radius: 6px
    # Chips
    mush-chip-border-radius: 6px
    modes:
        light: {}
        dark: {}
    mush-chip-spacing: 4px
    mush-chip-padding: 0 0.25em
    mush-chip-height: 32px
    mush-chip-font-size: 0.4em
    mush-chip-font-weight: normal
    mush-chip-icon-size: 0.7em
    mush-chip-avatar-padding: 0.1em
    mush-chip-avatar-border-radius: 50%
    mush-chip-background: var(--ha-card-background)
    #Sections
    ha-view-sections-column-max-width: 462px
    ha-view-sections-column-min-width: 462px
    ha-view-sections-column-gap: 8px

After an "All YAML Configuration" reload with the dev tools, and a Ctrl+Shift+R to force the reload (Firefox) things are looking pretty great. And FAR easier to move things around with drag and drop. I like it. A lot.

pcb1962 commented 4 months ago

I open a PR to fix the issue: #293

Hi Paul, I've tried and failed to build a new layout-card.js from your repo (Error: Your current platform "linux" and architecture "ia32" combination is not yet supported by the native Rollup build.) Any chance you could please upload a new version of layout-card.js with your changes as it doesn't look like Thomas is going to fix this anytime soon.

hellomarb commented 4 months ago

Here a build (on macOS) of layout-card.js (gzipped for github): layout-card.js.gz

andbad commented 4 months ago

Here a build (on macOS) of layout-card.js (gzipped for github): layout-card.js.gz

It works. Thank to you and @piitaya

By(t)e

pcb1962 commented 4 months ago

Here a build (on macOS) of layout-card.js (gzipped for github):

Thank you, works perfectly. I will migrate to grid or something eventually but I currently have around 40 dashboards using vertical layout so may take some time.

snigehere commented 4 months ago

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

pcb1962 commented 4 months ago

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

andbad commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 https://github.com/thomasloven/lovelace-layout-card/issues/291#issuecomment-2157855768

snigehere commented 4 months ago

@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.

thomasloven / lovelace-layout-card

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