Horizontal in Vertikal stack?

pellkopf · February 16, 2020, 11:19am

Hello everybody,
I have a question. Is it possible to put a horizontal stack in a vertical stack? My attempts with my own card have always failed. (I have to say that I also do very hard with the correct alignment of the code)
I currently have 7 thermostats in my HA. Each thermostat is in its own card. So far so good. Now, however, I want the last card in the first row to be displayed as the last (see picture). Is this somehow possible. Would it also be possible to split the 7 cards into 3 rows? I currently use the lovelcae ui mode.

Looking forward to your answers.

Here is my code for the view:

    cards:
      - type: horizontal-stack
        cards:
          - type: 'custom:mini-graph-card'
            align_header: left
            align_icon: left
            entities:
              - entity: sensor.wandthermostat_humidity
                index: 0
            color_thresholds:
              - value: 59
                color: '#EE0505'
              - value: 58
                color: '#FBA309'
              - value: 57
                color: '#03F630'
            hours_to_show: 24
            points_per_hour: 1
            animate: true
            hour24: true
            extrema: true
            name: Luftfeuchtigkeit Kinderzimmer
            show:
              points: true
              fill: fade
              labels: true
      - type: horizontal-stack
        cards:
          - entity: climate.schlafzimmer
            type: thermostat
      - type: horizontal-stack
        cards:
          - type: 'custom:mini-graph-card'
            align_header: left
            align_icon: left
            entities:
              - entity: sensor.wandthermostat_humidity_2
                index: 0
            color_thresholds:
              - value: 59
                color: '#EE0505'
              - value: 58
                color: '#FBA309'
              - value: 57
                color: '#03F630'
            hours_to_show: 24
            points_per_hour: 1
            animate: true
            hour24: true
            extrema: true
            name: Luftfeuchtigkeit Schlafzimmer
            show:
              points: true
              fill: fade
              labels: true
      - entity: climate.wohnzimmer
        type: thermostat
      - type: horizontal-stack
        cards:
          - type: 'custom:mini-graph-card'
            align_header: left
            align_icon: left
            entities:
              - entity: sensor.wandthermostat_humidity_3
                index: 0
            color_thresholds:
              - value: 59
                color: '#EE0505'
              - value: 58
                color: '#FBA309'
              - value: 57
                color: '#03F630'
            hours_to_show: 24
            points_per_hour: 1
            animate: true
            hour24: true
            extrema: true
            name: Luftfeuchtigkeit Wohnzimmer
            show:
              points: true
              fill: fade
              labels: true
      - type: horizontal-stack
        cards:
          - entity: climate.kinderzimmer
            type: thermostat
      - type: horizontal-stack
        cards:
          - entity: climate.kuche
            type: thermostat

cjsimmons · February 16, 2020, 12:37pm

You horizontal stacks only have one card in them.

You want to include multiple entities in the horizontal stack. See the docs.

pellkopf · February 16, 2020, 1:57pm

Hi Chris,
thank you for the fast response.
I had tried this at the very beginning. However, the view is totally compressed here. I had also tried Panel Mode before, but then not all thermostats are shown, only the first row.

Maybe I’m doing something wrong in the config?

type: horizontal-stack
cards:
  - type: 'custom:mini-graph-card'
    align_header: left
    align_icon: left
    entities:
      - entity: sensor.wandthermostat_humidity_2
        index: 0
    color_thresholds:
      - value: 59
        color: '#EE0505'
      - value: 58
        color: '#FBA309'
      - value: 57
        color: '#03F630'
    hours_to_show: 24
    points_per_hour: 1
    animate: true
    hour24: true
    extrema: true
    name: Luftfeuchtigkeit Schlafzimmer
    show:
      points: true
      fill: fade
      labels: true
  - type: 'custom:mini-graph-card'
    align_header: left
    align_icon: left
    entities:
      - entity: sensor.wandthermostat_humidity
        index: 0
    color_thresholds:
      - value: 59
        color: '#EE0505'
      - value: 58
        color: '#FBA309'
      - value: 57
        color: '#03F630'
    hours_to_show: 24
    points_per_hour: 1
    animate: true
    hour24: true
    extrema: true
    name: Luftfeuchtigkeit Kinderzimmer
    show:
      points: true
      fill: fade
      labels: true
  - type: 'custom:mini-graph-card'
    align_header: left
    align_icon: left
    entities:
      - entity: sensor.wandthermostat_humidity_3
        index: 0
    color_thresholds:
      - value: 59
        color: '#EE0505'
      - value: 58
        color: '#FBA309'
      - value: 57
        color: '#03F630'
    hours_to_show: 24
    points_per_hour: 1
    animate: true
    hour24: true
    extrema: true
    name: Luftfeuchtigkeit Wohnzimmer
    show:
      points: true
      fill: fade
      labels: true

mirekmal · February 16, 2020, 2:19pm

You can nest vertical and horizontals stack inside each other many times, no issue. For problem with only on card being displayed in panel mode - this is how it works… solution is to add yet another top level vertical or horizontal stack card and embed all other inside.

curious · February 16, 2020, 2:31pm

This is what I have that meets your demand:

          - type: vertical-stack
            cards:      

              - type: horizontal-stack
                cards:

and then a new horizontal stack for every three entities

AhmadK · February 16, 2020, 2:44pm

remarkably, it’s exactly how it’s used in the second example here.

curious · February 16, 2020, 2:58pm

That is not remarkable : I am searching for answers too

AhmadK · February 16, 2020, 3:26pm

I just wanted to underline that it’s in docs and the OP had a chance to read them as someone else referred them to the very same page… well, almost the same

cjsimmons · February 16, 2020, 11:51pm

The use of a panel might be handy here. Add a vertical stack with nested horizontal stacks for each row. The first row with the graphs, the second with the thermostat cards, and a third for the lonely thermostat card.

Do you have a graph for the last card? It’s tripping my OCD…

pellkopf · February 17, 2020, 10:35am

Hi Chris, hi everyone.
Many thanks for your help.
The secret for me was in the vertical stack
I have now been able to do everything with the vertical stack as I wanted it to be. I had just thought it was too complex.
Sometimes less is more

I have now created 3 individual vertical stacks.

AhmadK · February 17, 2020, 12:28pm

I think it would be great to post your working code here so for the future reference.

pellkopf · February 18, 2020, 6:31pm

Hi there,

here is my code for the 3 vertical stack.

 - badges: []
    cards:
      - cards:
          - align_header: left
            align_icon: left
            animate: true
            cards: null
            color_thresholds:
              - color: '#EE0505'
                value: 59
              - color: '#FBA309'
                value: 58
              - color: '#03F630'
                value: 57
            entities:
              - entity: sensor.wandthermostat_humidity
                index: 0
            extrema: true
            hour24: true
            hours_to_show: 24
            name: Luftfeuchtigkeit Kinderzimmer
            points_per_hour: 1
            show:
              fill: fade
              labels: true
              points: true
            type: 'custom:mini-graph-card'
          - entity: climate.kinderzimmer
            type: thermostat
        type: vertical-stack
      - cards:
          - align_header: left
            align_icon: left
            animate: true
            cards: null
            color_thresholds:
              - color: '#EE0505'
                value: 59
              - color: '#FBA309'
                value: 58
              - color: '#03F630'
                value: 57
            entities:
              - entity: sensor.wandthermostat_humidity_2
                index: 0
            extrema: true
            hour24: true
            hours_to_show: 24
            name: Luftfeuchtigkeit Schlafzimmer
            points_per_hour: 1
            show:
              fill: fade
              labels: true
              points: true
            type: 'custom:mini-graph-card'
          - cards: null
            entity: climate.schlafzimmer
            type: thermostat
          - entity: climate.kuche
            type: thermostat
        type: vertical-stack
      - cards:
          - align_header: left
            align_icon: left
            animate: true
            cards: null
            color_thresholds:
              - color: '#EE0505'
                value: 59
              - color: '#FBA309'
                value: 58
              - color: '#03F630'
                value: 57
            entities:
              - entity: sensor.wandthermostat_humidity_3
                index: 0
            extrema: true
            hour24: true
            hours_to_show: 24
            name: Luftfeuchtigkeit Wohnzimmer
            points_per_hour: 1
            show:
              fill: fade
              labels: true
              points: true
            type: 'custom:mini-graph-card'
          - entity: climate.wohnzimmer
            type: thermostat
        type: vertical-stack
    panel: false
    path: test-4
    title: Raumklima