Open wheindl opened 2 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.
I have the same issue - I didn't see anything in breaking changes for this
Same her since the lates update of HA. No layout break anymore.
Same here
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.
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 🤞
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 ...
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!
Same issue since upgrading core to 2024.6
Same here. Updated to 2024.6 and no more breaks as a result. Reverted to 2024.5 which "fixed" it.
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.
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).
Same..
Same here. You only know what it's worth if you have to miss it..... :-(
same
Yes it's broken and setting layout_type: custom:vertical-layout
isn't working for me on views.
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.
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.
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:
Just found a work around. Add a vertical stack to the Section that contains the cards you want to occupy a whole row.
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.
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 ....
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
With 2024.6 card are now wrapped with a hui-card
so the layout card needs to support that.
I guess the issue still exists with core 2024.6.1 that has been released 12h 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:
[...]
I moved to a sections layout, was planning on this anyway and I am really happy I did. So much more flexibility
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
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:
type: custom:vertical-layout
to type: sections
badges: []
max-columns: 3
(or your preference)sections:
- type: grid
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.
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!!
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.
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?
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 🙂
ha-view-sections-column-max-width
(default: 500px
)ha-view-sections-column-min-width
(default: 320px
)ha-view-sections-column-gap
(default: 32px
)ha-view-sections-row-gap
(default: 8px
)ha-section-grid-column-gap
(default: 8px
)ha-section-grid-row-gap
(default: 8px
)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
@piitaya Fantastic, I tested the PR and the layout-break is working again, thank you!
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?
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.
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.
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.
Here a build (on macOS) of layout-card.js (gzipped for github): layout-card.js.gz
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
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.
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
Have you cleared the browser cache? Most HA interface changes seem to require that.
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
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...
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
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
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
@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.
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.
Error messages from the browser console:
By putting an X in the boxes ([X]) below, I indicate that I: