Lovelace - /0 view no longer behaving as expected

Share your Projects! Dashboards & Frontend
1

I feel i’ve been staring at this configuration for too long and need a fresh pair of eyes. I’m unsure why but this view refuses to render in anything other than a single vertical stack. Even changing the vertical stack card to the horizontal stack card results in all cards in this view being condensed into a single centered column on the page (see image below).

Can anyone see where I went wrong? Thanks in advance for your inputs.

#########################################################################################

resources:
  - url: /local/card-tools.js
    type: js
  - url: /local/slider-entity-row.js?v=d6da75
    type: js
  - url: /local/fold-entity-row.js?v=f28e6e
    type: js
  - url: /local/thermostat-card.js?v=0.1.1
    type: module
  - url: /local/plan-coordinates.js?v=0.1.0
    type: js
  - url: /local/custom-fan-card.js?v=0
    type: module
  - url: /local/layout-card.js?v=bd7e5a
    type: js
  - url: /local/button-card.js?v=0.0.3
    type: module
  - url: /local/tracker-card.js?v=0.1.5
    type: js
  - url: /local/card-modder.js?v=35eb37
    type: js
  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v0
    type: js




#########################################################################################

title: Welcome Home
views:
  - title: Home
    icon: mdi:home
    cards:
      - type: vertical-stack
        cards:
          - type: weather-forecast
            entity: weather.yweather
          - type: custom:thermostat-card
            title: Nest
            entity: climate.hallway
          - type: custom:tracker-card
            trackers:
              - sensor.custom_card_tracker
              - sensor.custom_component_tracker
          - type: entities
            title: Great Room Lights
            show_header_toggle: false
            entities:
              - type: custom:slider-entity-row
                entity: light.great_room
              - type: section
              - type: custom:slider-entity-row
                entity: light.kitchen_dimmer
              - type: custom:slider-entity-row
                entity: light.dining_room
          - type: entities
            title: Doors
            show_header_toggle: false
            entities:
              - binary_sensor.front_door
              - binary_sensor.garage_side_door
              - binary_sensor.laundry_room_door
              - binary_sensor.sliding_glass_door
          - type: entities
            title: Front Outdoor Lights
            show_header_toggle: false
            entities:
              - switch.exterior_driveway
              - switch.exterior_entry
          - type: entities
            title: Ceiling Fans
            show_header_toggle: false
            entities:
            - entity: fan.master_bedroom_fan
              type: custom:custom-fan-card
              name: Master Bedroom Fan
            - entity: fan.office_fan
              type: custom:custom-fan-card
              name: Office
            - entity: fan.living_room_fan
              type: custom:custom-fan-card
              name: Living Room
            - entity: fan.daniels_fan
              type: custom:custom-fan-card
              name: Daniel's Bedroom
          - type: custom:compact-custom-header
            notification: false
            voice: false
            options: true
            menu: true
            user_agent: Mobile

Below is the result of changing - type: vertical-stack to `- type: horizontal-stack’.

36%20AM
36%20AM1223×624 55.1 KB

In addition to the above mentioned stack change, I’ve also tried removing several of the cards and reordering cards to no avail.

2

shouldn’t the compact custom header be the last item in a view? right now it’s the last item in your vertical stack. I’m going off memory here and I don’t use the card so I could be wrong.

3

This issue predates Compact Custom Header. When I finally did implement CCH, I was still using Panel Mode which requires CCH to be the last item in a stack. I haven’t modified the layout because I’m editing my yaml files in nano and am too lazy to figure out why I can’t edit my yaml files via Samba.

For anyone stumbling upon this thread later down the road, here are the instructions for using CCH with Panel mode.

To use with panel view place this card inside a “container card” with the panel card (stack cards, layout-card, etc.), otherwise this card isn’t “displayed” and won’t load. An example would be placing this card in a vertical stack with the card in the panel view.

https://github.com/maykar/custom-lovelace/tree/master/compact-custom-header#important-notes

4

Are you clearing cache? And are you using frontend: javascript:latest?

5

Yep. Clearing cache and using javascript_version: latest. Also testing in browsers on other computers.

6

Ok, I miss-read your whole thread. Just remove:

      - type: vertical-stack
        cards:

Then remove 4 indents from the cards that were inside vertical-stack that should now be in the views cards.

EDIT: to clarify, doing this will fix this: