How to achieve a constant layout

[rontaylor]

I updated to the latest 110 this morning and a problem that I have had before has become more pronounced.

When I first bring up my dashboard in my web browser (I use firefox for HA) i get this

I go to configure UI and set it to

Which is what I want it to be…
but if I close down the browser and come back some time later it goes back to the first image. It happens on all my views.
Is there a way to stop this?

Like I said this used to happen before the update but seems to be much more pronounced now.

All I have done is

1. Do the update via supervisor
2. Wait for it to come back on line after update.

I have not done any restarts / reboots etc. Should I have to?

Confused…

[micque]

I use the custom card layout-card and set the max_columns with a break where I want the columns to split. I get same layout in portrait or landscape mode, tablet or computer screen. For cellphone it becomes a single column display. Always the same and always predictable results. Hasn’t changed through the various ha versions. Changed to this several versions ago when I started having similar problems with the ui as you mentioned. Sample view below:

title: Home
icon: mdi:home-assistant
panel: true
cards:
  - type: custom:layout-card
    max_columns: 2
    cards:
      - !include home_alert_card.yaml
      - !include home_glance_card.yaml
      - break
      - !include home_device_card.yaml
      - !include home_doors_card.yaml
      - !include home_lights_card.yaml
      - !include home_media_card.yaml

[rontaylor]

Thanks for the suggestion, I will look into that. It would mean a considerable rewrite of my configuration.yaml file I think. I wish there was an option to be able to drag and drop, resize cards etc in a view and they stay there at a constant size but I don’t have these skills.

[micque]

Not necessarily. Before I broke mine into cards like it is now it was a yaml file per view and the change required adding layout-card to the resources, a panel: true statement and a type: custom: layout-card statement per view and several breaks.

[rontaylor]

I had a play with this and it told me that it could not find custom: layout-card?
I don’t have HACS loaded and am using the lovelace UI.
I don’t have a lot of experience with lovelace other than what the integrations allow me to use.
Do you recommend loading HACS?

[kiwijunglist (Mike Stewart)]

i recommend hacs it makes things quite easy once you figure it out.

[nickrout]

It is a responsive web interface. It is meant to move about it how it thinks it will fit best.

It is complex though, sometimes when the frontend is updated in a major way (as it has been in 0.110) it may have some bugs. Post an issue in the frontend github if you continue to have problems, but it seems a common problem on 0.110 and should be getting fixed.

[GH2user]

Well, it might be a bit responsive.
On my 34" monitor it doesn’t get more than 3 columns leaving at least two columns of white space if I make it full screen. Now I never do that but it definitely is not responsive, there are hard-coded limits.

[rontaylor]

My layout was stable prior to 110 and yes I have noted that the number of columns is limited to 2 or 3 when I first load but does go to 4 when you enter the config UI mode and then stays when you exit.
My instinct tells me that this is a bug but I don’t have enough experience to be able to report it accurately on github.
I plan to have a look at HACS next week when I have a few days straight to fiddle if all does not go to plan. Will just have to persevere with the current until then.

[nickrout]

Apparently fixed in 0.110.2.

[rontaylor]

Great. Thanks for the heads up.

[rontaylor]

Notice that 110.2 was available today so updated it. I did not see a real lot of difference but since my first post I had done some work on my configurations.
I got an idea from "miscue’s"* post. I started using Vertical stacks with nested horizontal stacks.
The standard lovelace ui seemed to be happy with this and placed my vertical stacks across the screen.

These are the full screen views we use most

I am hesitant to jump into HACS as I have read many posts where it just stops working when some updates come along.
This disruption would not work well with my household as my wife and I are in our 70’s and although I have worked in IT all my life I need to make it as simple as possible for her.

This is simple & hopefully robust.

Thanks for all input & feedback.

[DavidFW1960 (David)]

You could try using vertical and horizontal stacks.

[rontaylor]

Hi David,
I thought I was trying to do that. I have used vertical stacks and then with my cameras I have nested a horizontal stack?
Have you seen something that I have missed?
Thanks you

[DavidFW1960 (David)]

Just noticed you did say that. Sorry about that. I’ll need to review your screenshots - did you post the yaml for the views?

I have half a dozen views with vertical stacks and some nested horizontal ones. None of these have done anything odd for as long as I can remember. I’m on 0.110.2. Most of my views have 3 columns.

I am also running an auto-generated dev of 0.111 and that seems to have 4 columns in it though. If that flows through to my main config I’ll be using the layout card to revert.

[rontaylor]

No I did not post the yaml but here is the one for the cameras.

cards:
  - content: '** click to view live  **'
    title: Cameras
    type: markdown
  - cards:
      - aspect_ratio: 100%
        camera_image: camera.front_door_camera
        entity: camera.front_door_camera
        show_state: false
        type: picture-entity
      - aspect_ratio: 100%
        entity: camera.shed_camera
        show_state: false
        type: picture-entity
    type: horizontal-stack
  - cards:
      - aspect_ratio: 100%
        camera_image: camera.back_door_camera
        entity: camera.back_door_camera
        show_state: false
        type: picture-entity
      - aspect_ratio: 100%
        camera_image: camera.side_camera
        entity: camera.side_camera
        show_state: false
        type: picture-entity
    type: horizontal-stack
type: vertical-stack

The others are similar to this depending on need.

Yes I am on 110.2 and now that I have the vertical stack system it seems to be behaving.

Does that make it more clear?

[DavidFW1960 (David)]

views:
  - title: Home Assistant
    icon: mdi:home-assistant
    path: home_assistant
    cards:
      - type: vertical-stack
        cards:
          - type: entities
            title: System Information
            show_header_toggle: false
            entities:
              - sensor.last_successful_authentication
              - sensor.ssl_certificate_expiry
              - sensor.memory
              - sensor.processor
          - type: horizontal-stack
            cards:
              - type: gauge
                name: CPU Temperature
                unit: °C
                entity: sensor.cpu_temperature
                severity:
                  green: 0
                  yellow: 50
                  red: 60
              - type: gauge
                name: Disk Usage
                unit: '%'
                entity: sensor.disk_use_percent
          - type: horizontal-stack
            cards:
              - type: gauge
                name: CPU Usage
                unit: '%'
                entity: sensor.processor_use
                severity:
                  green: 0
                  yellow: 25
                  red: 50
              - type: gauge
                name: Memory Usage
                unit: '%'
                entity: sensor.memory_use_percent
                severity:
                  green: 0
                  yellow: 35
                  red: 50

Here’s a sample of one of mine. I’m not sure on your indenting.

I’m on my ipad right now but can take a closer look tomorrow.

[rontaylor]

Interesting you make the comment on indenting.
I find yaml most frustrating with it’s indenting.

For example
in the sample I gave I did not write the actual yaml, Lovelace UI did.
I just started it and then noticed that when I went to edit it it came up with the screen dump (Post 12 )that I posted on May 25. Hmmm I though I can use that and did.
Then when you wanted the yaml I just asked for source code and that’s what it gave me.

This saves on the frustration some…

some screen dumps

Gives this when you click on “show Code Editor”