No options for layout-card appear in Settings dialogue in Dashboard settings

[edmooredop]

My Home Assistant version: 2022.12.0

Layout-card version (FROM BROWSER CONSOLE): 2.4.2

What I am doing: Trying to limit column layout to 2 on my main dashboard

What I expected to happen: Seeing additional options in the SETTINGS page of the dashboard layout

What happened instead: I see the text that says "You have layout-card installed which adds some options to this dialog." but no other options in the dialogue.

Minimal steps to reproduce:

# The least ammount of code possible to reproduce my error

# End of code

Error messages from the browser console:

198lovelace-layout-card.js:215 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'options') at F.schema (lovelace-layout-card.js:215:2128) at F.value (hui-dialog-edit-view.ts:571:1) at F.update (styles.ts:372:1) at F.performUpdate (styles.ts:372:1) at F.scheduleUpdate (styles.ts:372:1) at F.$EC (styles.ts:372:1)

---

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.

[edmooredop]

I have also tried manually adding the layout options in my configuration for this dashboard

views:
  - theme: Backend-selected
    title: Home
    layout:
      width: 150
      max_cols: 2

Has no effect on columns at all.

[edmooredop]

Update, I forgot to add

type: custom:masonry-layout

To my configuration, that DOES work. So it seems it's just the visual editor options for layout-card that aren't working.

[rursache]

Having the same issue (no layout tab in the tab settings) but it works if i manually add the yaml layout keys

[abenedet78]

I'm having the same issue. Here's a screenshot.

[MelvinvanMelzen]

I have the exact same issue. Tried clearing browser cache, restarting HA, hard refresh, didn't work. Running FF on W10 and the HA app for android

[TP51]

Same here, anyone a solution?

[AussiSG]

As mentioned on the github page the LAYOUT tab possibilty is now also integrated in the SETTINGS tab :)

[TP51]

Thanks for your answer, button i'm affraid it is not there, nothing extra to see

Theo

Op ma 9 jan. 2023 21:28 schreef AussiSG @.***>:

As mentioned on the github page the LAYOUT tab possibilty is now also integrated in the SETTINGS tab :)

[image: afbeelding] https://user-images.githubusercontent.com/56043947/211401868-27a3e0ff-6623-43f9-a5d1-b27236479961.png

— Reply to this email directly, view it on GitHub https://github.com/thomasloven/lovelace-layout-card/issues/226#issuecomment-1376276086, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWRIIU5TXXSQ572RGTBZ4STWRRYH7ANCNFSM6AAAAAASYMJU7U . You are receiving this because you commented.Message ID: @.***>

[Finagain]

Same here. I don't have any options for the layout card. I just have View Type radio buttons with only 3 options.

[galligan]

I'm also not seeing the layout card option in the view configuration dialog.

[sewershagger]

Same issue

[tenly2000]

Okay. First - all of you saying "exact same", "same issue", etcetera do not have the same issue! Some of you see the "Masonry (Layout Card)" and some of you do not.

I was in the same boat a few minutes ago and found this thread that was posted 3 months ago and nobody had helped yet and that frustrated me. I was about to delete it and just install something else - but then decided to troubleshoot.

My first problem was that I didn't see the "Masonry (Layout Card)" option, I only saw the default 3 options. The problem turned out to be that the resource definition was pointing to the wrong place. My resources are defined in configuration.yaml and for some reason I had:

    - url: /hacsfiles/lovelace-layout-card/layout-card.js
      type: module 

I don't remember adding that - but it was wrong. For me, it should have been:

    - url: /local/community/lovelace-layout-card/layout-card.js
      type: module

After you change the URL to its proper value, restart Home Assistant. I don't think you actually need to do a full restart if you just click "reload resources" but I did and at this point I think you should too.

Now when you go back to settings, you'll see the 3 radio buttons are gone and there's a drop down list with many more options - including the "Masonry (Layout Card)" once that you need in order to get to "the exact same problem" as everybody else. You should also now see the customization box on the Settings tab where you can enter the width: and max_columns:

For some of you, everything might start working at this point. For the rest of you, read the next post and I'll explain how I finally managed to get it to work.

[tenly2000]

Okay - so. I finally got the option to appear that let me select the "Masonry (Layout Card)" view type, and the box appeared on the Settings tab that would let me enter:

width: 300
max_cols: 10

...just like it says in the doc, right?
If you don't see an area underneath the "subviews" toggle, I'd suggest restarting Home Assistant and coming back. If it's still not there, I can't help you and I'm not sure the rest of these steps will help. If the .js resource is being properly loaded, there should be a box that you can type in below "subviews". Look closely. It's easy to miss if you're not looking for it.

Anyhow - I entered the values the doc said, but nothing changed. I still just had the same 3 columns I started with.

So - then I just started playing with different numbers - and I finally hit on a combination that did something:

width: 200
max_cols: 5

I think the issue was that I wasn't running my browser full screen and for some reason the 300 was too big. So my advice is to reduce the width: value until you see something work - or maximize your browser first.

Here's what the Settings tab should look like:

Anyhow - I hope this helps some of you - but no guarantees - I'm brand new to this also!

[tenly2000]

Alright, I think I figured it out. Width: sets the maximum width for each column. And max_cols: sets the maximum number of columns that will be displayed. (Which I'm sure is what the doc says)

But if you don't have enough space: max_cols (10) times width (300) = 3000 pixels, then I guess it doesn't modify anything and you're left with the default - which made us think it wasn't working.

If you have more space than you need, the view will be centered with empty space on either side. For example, here's what one of my dashboards looks like when I choose width=250 and max_cols=4. I had a little extra horizontal space in my browser window so it centered the columns within the browser window:

...but if I leave width=250 and set max_cols=6, I get this:

... and if I change max_cols to anything higher than 6, it just displays 6

So the only thing I don't get is why are the colums different widths when I choose max_cols=4 version max_cols=6. In both cases, I've set width=250, but the width is clearly different... if anyone can figure that out, please let me know.

[cliffordcook]

Wasted an hour on this. Just being stupid. The Layout option DOES appear in settings, but it is not labeled as anything. If it said LAYOUT I would have been done. I thought the box had something to do with subviews.