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

wheindl commented 1 month 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.

larryb31 commented 1 month ago

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

Montreal666 commented 1 month 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)

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 commented 1 month ago

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 commented 1 month 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.

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

@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 (https://github.com/thomasloven/lovelace-layout-card/issues/291#issuecomment-2156220648). 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 commented 1 month ago

@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 commented 1 month ago

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 commented 3 weeks ago

is this mod even still being maintained??

igorsantos07 commented 3 weeks ago

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

nathan951 commented 3 weeks ago

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 commented 2 weeks ago

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

pcb1962 commented 2 weeks ago

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 commented 2 weeks ago

Thank you, works again !

raytedjaja commented 1 week ago

still waiting on 2024.5 release

thomasloven / lovelace-layout-card

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