LoveLace Dashboard Issues

MarkB1 · February 23, 2022, 3:17pm

I cannot seem to configure or have HA auto configure my dashboard correctly.

No matter what I seem to do I end up with a stack of cards in Column 2

In column 1, there are five cards

column 2, 20 plus

column 3 & 4 2 cards each.

Is one of my cards causing this? no matter how much I arrange them up / down I still get this strange behavior?

I have tried deleting cards, re arranging the order but still end up with the same outcome.

I know others have had issues in the past but have yet to find a solution, others have asked if it is possible just to drag / drop on the dashboard, would be a very nice feature?

Regards,

pedolsky · February 23, 2022, 7:58pm

Difficult to answer without your code. How should it look like?

MarkB1 · February 24, 2022, 10:29am

I would like the four column’s to be equally distributed, not as it is now with column 2 containing most of the cards.

My Code

Regards,

pedolsky · February 24, 2022, 11:52am

Thank you.
After copying your „home“ dashboard I can see many single cards.
Working with many horizontal and vertical elements quickly becomes confusing in the UI. I would go like this:
Copy the whole code into a yaml file to sort the elements.
Assign main columns on top of each of the 4 sections (e.g. type: grid with 1 column, this way you have an optical difference, which makes it easier to differ between main and child elements).
Indent the corresponding child elements accordingly.

MarkB1 · February 24, 2022, 12:21pm

Hi, Not sure by what you mean by Indent, could you give an example?

Regards,

pedolsky · February 24, 2022, 12:46pm

Sure. Let’s say, you have a grid card:


    type: grid
    columns: 3
    square: false
    title: Lampen
    cards:
      - type: …
        entity: …

Now yo want to make this grid card part of another grid or a stack card. You create a new yaml file

# test.yaml


    type: vertical-stack
    cards:
      - …

You can’t copy your grid card directly under your (main) stack card, because this would look like this and would be invalid:


    type: vertical-stack
    cards:
     - type: grid #invalid indentation 
    columns: 3 #invalid indentation
    square: false #invalid indentation
    title: Lampen #invalid indentation
    cards: #invalid indentation
      - type: … #invalid indentation

Correct indentation:


    type: vertical-stack
    cards:
      - type: grid
        columns: 2
        square: false
        title: Lampen
        cards:
          - type: …

MarkB1 · February 24, 2022, 12:54pm

Ok so lets say 4 columns, 4 vertical stack cards each containing all the individual cards I want in that column?

pedolsky · February 24, 2022, 2:29pm

Yes. Some simplified example:


type: grid # frame
columns: 1
square: false
title: Home
cards:
  - type: markdown # top card
    content: >
      Hello! It's {{ states('sensor.openweathermap_temperature') |int(0)
      |round(1)}}° and {{ states('sensor.openweathermap_condition') }}
  - type: horizontal-stack # let the following columns float from left to right
    cards:
      - type: vertical-stack # col. 1
        cards:
          - type: button
            icon_height: 42px
            icon: mdi:cat
          - type: button
            icon_height: 42px
            icon: mdi:cat
          - type: button
            icon_height: 42px
            icon: mdi:cat
          - type: button
            icon_height: 42px
            icon: mdi:cat
      - type: vertical-stack  # col. 2
        cards:
          - type: button
            icon_height: 42px
            icon: mdi:dog
          - type: button
            icon_height: 42px
            icon: mdi:dog
          - type: button
            icon_height: 42px
            icon: mdi:dog
          - type: button
            icon_height: 42px
            icon: mdi:dog
      - type: vertical-stack  # col. 3
        cards:
          - type: button
            icon_height: 42px
            icon: mdi:cat
          - type: button
            icon_height: 42px
            icon: mdi:cat
          - type: button
            icon_height: 42px
            icon: mdi:cat
          - type: button
            icon_height: 42px
            icon: mdi:cat
      - type: vertical-stack  # col. 4
        cards:
          - type: button
            icon_height: 42px
            icon: mdi:dog
          - type: button
            icon_height: 42px
            icon: mdi:dog
          - type: button
            icon_height: 42px
            icon: mdi:dog
          - type: button
            icon_height: 42px
            icon: mdi:dog

Output: