Losing head with vertical stack

Configuration Frontend
1

i can’t solve this vertical stack configuration problem…
i my first view i wold like to have 3 columns, below the configuration…i only see 2 columns, why?

views:
  - title: Dashboard
    icon: mdi:home-assistant
    badges:
      - sensor.davide_tasker_track
      - sun.sun
      - sensor.stato_antifurto
      - sensor.entryway_thermostat_temperature
      - sensor.temp_garage
    cards:
      - type: vertical-stack
        title: Comandi
        show_header_toggle: false
        cards:
          - type: entities
            title: Cancello
            show_header_toggle: false
            entities:
              - type: call-service
                icon: mdi:gate
                name: Totale
                action_name: Apri/Chiudi
                service: switch.toggle
                service_data:
                  entity_id: switch.apertura_cancello
              - type: call-service
                icon: mdi:gate
                name: Pedonale
                action_name: Apri/Chiudi
                service: switch.toggle
                service_data:
                  entity_id: switch.apertura_ped_cancello
              - type: divider
              - entity: sensor.temp_est_cancello
                name: Temperatura Motore
                secondary_info: last-changed
          - type: conditional
            conditions:
              - entity: switch.apertura_garage
                state: "on"
            card:
              type: entities
              title: Garage
              show_header_toggle: false
              entities:
                - type: call-service
                  icon: mdi:garage
                  name: Portone
                  action_name: Chiudi
                  service: switch.toggle
                  service_data:
                    entity_id: switch.apertura_garage
            conditions:
              - entity: switch.apertura_garage
                state: "off"
            card:
              type: entities
              title: Garage
              show_header_toggle: false
              entities:
                - type: call-service
                  icon: mdi:garage
                  name: Portone
                  action_name: Apri
                  service: switch.toggle
                  service_data:
                    entity_id: switch.apertura_garage
      - type: vertical-stack
        cards:
          - type: glance
            show_state: false
            entities:
              - entity: light.abatjour_camera_letto
                name: Abatjour
                tap_action: 
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.yeelight_rgb_7c49eb12ca52
                name: Ingresso
                tap_action: 
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.ingresso_cucina
                name: Ing.Cuc.
                tap_action: 
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.tavernetta_2
                name: Tav.
                tap_action: 
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.corridoio_sotto_2
                name: Corr.Sott.
                tap_action: 
                  action: toggle
                hold_action:
                  action: more-info
              - entity: light.garage
                name: Garage
                tap_action: 
                  action: toggle
                hold_action:
                  action: more-info
          - type: entities
            entities:
              - entity: switch.07202524dc4f223a44a9
                name: Macchinetta del Caffè
                icon: mdi:coffee
              - entity: switch.07202524dc4f223a9793
                name: Stampante
                icon: mdi:printer 
      - type: vertical-stack
        cards:
          - type: weather-forecast
            entity: weather.casa

Schermata%20a%202018-12-15%2019-55-29
Schermata%20a%202018-12-15%2019-55-291366×740 72.2 KB

2

This has something to do with HA counting the entity’s in the cards. But not sure.
Maybe take a look at @thomasloven 's layout-card

3

The fact that you create three vertical stacks doesn’t necessarily mean that each stack has their own column.
It just means that the cards that are in the stack basically are grouped together.
If you make the window narrower, you will probably end up with one column.

If you want to force 3 columns, I think you need to create a horizontal stack first with 3 vertical stacks in it.
And you should use the panel:true setting for the horizontal stack otherwise it will force the three columns into the width of the columns as you have them now.

But this means that you will always have three columns, no matter how wide your screen actually is. This might result in a not-so-useful layout e.g. on a smartphone screen in portrait mode.

4

for example, in this other view i have 3 vertical stack and the screen has 3 columns, same configuration.
i’d like to have same configuration…

  - name: Media
icon: mdi:television
badges:
  - sensor.davide_tasker_track
  - sun.sun
  - sensor.stato_antifurto
  - sensor.entryway_thermostat_temperature
  - sensor.temp_garage
cards:
  - type: vertical-stack
    title: Salone
    cards:
      - type: markdown
        content: >
            # Salone 
      - type: media-control
        entity: media_player.chromecast1781
        name: Chromecast Salone          
      - type: media-control
        entity: media_player.tv_salone
      - type: vertical-stack
        cards:
          - type: "custom:button-card"
            entity: binary_sensor.skyqpower
            icon: mdi:power
            size: 50px
            name: 'SKY'
            action: call-service
            service: script.sky_command_power
            color_type: card
            color: rgb(66, 134, 244)
          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                entity: script.sky_command_channeldown
                icon: mdi:chevron-down
                size: 45px
                show_state: false
                action: call-service
                service: script.sky_command_channeldown
                color_type: card
                color: rgb(66, 134, 244)

              - type: "custom:button-card"
                entity: script.sky_command_channelup
                icon: mdi:chevron-up
                size: 45px
                show_state: false
                action: call-service
                service: script.sky_command_channelup
                color_type: card
                color: rgb(66, 134, 244)
  - type: vertical-stack
    cards:
      - type: markdown
        content: >
            # Cucina 
      - type: media-control
        entity: media_player.tv_cucina
        name: Chromecast Cucina
      - type: media-control
        icon: mid:google-home
        entity: media_player.cucina_home 
  - type: vertical-stack
    cards:
      - type: markdown
        content: >
            # Tavernetta
      - type: media-control
        entity: media_player.tavernetta
        name: Google Home Mini

Schermata%20a%202018-12-15%2023-27-15
Schermata%20a%202018-12-15%2023-27-151366×740 65.7 KB

5

I think if you make the window narrower on this one it will switch to two columns at one point.

6

I don’t think you have enough entities. :slight_smile: If I recall, the wrap to the next column won’t take place until you have more than 4 items listed.

7

yes, it’s true, it solve the problem if i use other device (eg: smartphone), but can’t understand why there are only 2 columns

8

i tried to add entities but nothing changed… and in my second view attached, there’s only one device in last columns