Vertical-stack/horizontal-stack ignored in ui-lovelace.yaml

Configuration
1

just moved to use with ui-lovelace.yaml configuration instead of directly changing the UI, and there is a strange issue - those stacks seems to be ignored no matter what i do:

title: Home
views:
  - title: Boiler
    type: vertical-stack
    cards:
      - type: entities
        entities:
        - input_number.boiler_timer_set
        - switch.boiler_power
      - type: history-graph
        hours_to_show: 24
        refresh_interval: 300
        title: Usage (Day)
        entities:
        - switch.boiler_power
      - type: history-graph
        hours_to_show: 168
        refresh_interval: 3600
        title: Usage (Week)
        entities:
        - switch.boiler_power

the last history graph is displayed to the right and not at the bottom, and even if i change the vertical to horizontal, the view looks exactly the same - so for some reason the stack is ignored.

2

finally got it to work by adding another separataed vertical-stack for the history-graph elements, but i don’t understand - why this separation is needed?

  - title: Boiler
    type: vertical-stack
    cards:
    - type: entities
      name: Boiler Set
      entities:
        - input_number.boiler_timer_set
        - switch.boiler_power
    - type: vertical-stack
      cards:
      - type: history-graph
        hours_to_show: 24
        refresh_interval: 300
        title: Usage (Day)
        entities:
        - switch.boiler_power
      - type: history-graph
        hours_to_show: 168
        refresh_interval: 3600
        title: Usage (Week)
        entities:
        - switch.boiler_power
3

i did the following test - using the following in the configuration:

  - title: Smart Lamp
    type: vertical-stack
    cards:
    - type: entities
      name: Lamp
      entities:
      - light.smartlamp_light
      - switch.smartlamp_auto_sleep
      - switch.smartlamp_night_mode
      - input_select.smartlamp_scenario_mode
      - input_number.smartlamp_scenario_delay_set
    - type: horizontal-stack
      cards:
      - type: picture
        image: /local/init.png
        tap_action:
          action: call-service
          service: script.smartlamp_loadpoint1
      - type: picture
        image: /local/init.png
        tap_action:
          action: call-service
          service: script.smartlamp_loadpoint2
      - type: picture
        image: /local/init.png
        tap_action:
          action: call-service
          service: script.smartlamp_savepoint1
      - type: picture
        image: /local/init.png
        tap_action:
          action: call-service
          service: script.smartlamp_savepoint2

generates this view:

1129×413 28.5 KB

if i switch between the " - type: entities" and “- type: horizontal-stack” like this:

  - title: Smart Lamp
    type: vertical-stack
    cards:
    - type: horizontal-stack
      cards:
      - type: picture
        image: /local/init.png
        tap_action:
          action: call-service
          service: script.smartlamp_loadpoint1
      - type: picture
        image: /local/init.png
        tap_action:
          action: call-service
          service: script.smartlamp_loadpoint2
      - type: picture
        image: /local/init.png
        tap_action:
          action: call-service
          service: script.smartlamp_savepoint1
      - type: picture
        image: /local/init.png
        tap_action:
          action: call-service
          service: script.smartlamp_savepoint2

    - type: entities
      name: Lamp
      entities:
      - light.smartlamp_light
      - switch.smartlamp_auto_sleep
      - switch.smartlamp_night_mode
      - input_select.smartlamp_scenario_mode
      - input_number.smartlamp_scenario_delay_set

i’m getting this view:

b
b942×578 28.1 KB

why this is happening? i need the horizontal stack to be BELOW the entities - so what am i missing here?

4

using your first post for this example:

views:            # all views listed under this
  - title: Boiler # title of the first view
    cards:        # all cards for the Boiler view here
    - type: vertical-stack # vertical stack is a card that "holds" cards
      cards:      # all cards to be in vertical stack under here
        - type: entities
          entities:
          - input_number.boiler_timer_set
          - switch.boiler_power
        - type: history-graph
          hours_to_show: 24
          refresh_interval: 300
          title: Usage (Day)
          entities:
          - switch.boiler_power
        - type: history-graph
          hours_to_show: 168
          refresh_interval: 3600
          title: Usage (Week)
          entities:
          - switch.boiler_power
5

Thanks for the reply mayker, but i missed your point - these comments i already know but i don’t understand why it behaves differently than the way it should. in this example the last horizontal-graph is displayed to the RIGHT and not the BOTTOM as it should be.

6

You’re entering the first vertical-stack in the view config and so it’s ignored, because there is no option in views.
Enter it under ‘cards’ and it works as expected.

7

Your example:

views:
  - title: Boiler
    type: vertical-stack
    cards:

Corrected:

views:
  - title: Boiler
    cards: # the missing bit
      - type: vertical-stack
        cards:
8

i see that now - fixed and working - thanks :slight_smile: