#Problem with width of Cards

1 messages · Page 1 of 1 (latest)

hollow fog
#

Hello everyone,

I have a problem with the HA Dashboard Add-On for sidebars and the width of the cards.

I have combined a vertical stack with horizontal stacks. I can't get it to use the full width (see screenshot).

I have already tried it with layout-card, but there the sidebar is always deleted.
Can anyone help me with this?
Thank you very much!
Here is my code:

  - title: Kiosk
    path: kiosk
    background: >-
    type: custom:ha-dashboard
    sidebar:
      stickyCards:
        - type: custom:clock-weather-card
          entity: weather.zuhause
        - cards: null
          type: custom:sonos-card
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:hue-like-light-card
                entity: light.wohnzimmer
              - type: media-control
                entity: media_player.wohnzimmer
              - type: thermostat
                entity: climate.wohnzimmer
                name: Heizung
            title: Wohnzimmer
          - type: horizontal-stack
            cards:
              - type: custom:hue-like-light-card
                entity: light.schlafzimmer
              - type: media-control
                entity: media_player.schlafzimmer
              - type: thermostat
                entity: climate.dq_klima_room_temperature
                name: Klima
            title: Schlazimmer
          - type: horizontal-stack
            cards:
              - type: media-control
                entity: media_player.bad
            title: Badezimmer
          - type: horizontal-stack
            cards:
              - type: media-control
                entity: media_player.unnamed_room
            title: Küche
          - type: horizontal-stack
            cards:
              - type: custom:hue-like-light-card
                entity: light.flur
            title: Flur
mossy cloud
#

Sidebar or panel view will use the full width of the screen. If you use panel, you have to enclose all your cards in a grid or stack of some kind, because only one card is displayed.

hollow fog
#

Hi @mossy cloud.
I have now tried panel or sidebar. When I specify both settings, the sidebar on the left is no longer displayed.

gilded ferry
#

I am not sure if this will help, but I screwed around with layouts for a kiosk for a long time, and someone in ha community finally pointed me in the right direction. The bottom row still rolls off the screen when middle row is too large, but it is close.

type: custom:layout-card
layout_type: custom:grid-layout
layout_options:
  grid-template-columns: 50% 25% 25%
  grid-template-rows: 500px auto auto
  grid-template-areas: |
    "a b c"
    "d d d"
    "e e e"
cards:
  - type: picture-entity
    entity: camera.google_photos_favorites_media
    view_layout:
      position: a
    image_style:
      object-fit: contain
  - type: todo-list
    entity: todo.p
    title: P
    view_layout:
      position: b
    card_mod:
      style: |
        ha-card.type-todo-list .addRow {
              display: none;
            }
  - type: todo-list
    entity: todo.r
    title: R
    view_layout:
      position: c
    card_mod:
      style: |
        ha-card.type-todo-list .addRow {
              display: none;
            }
  - type: custom:week-planner-card
    calendars:
      - entity: calendar.o
    view_layout:
      position: d
      grid-column: 1 / span 3
  - type: horizontal-stack
    cards:
      - show_current: true
        show_forecast: true
        type: weather-forecast
        entity: weather.forecast_home
        forecast_type: hourly
      - type: custom:digital-clock
    view_layout:
      position: e
      grid-column: 1 / span 3
  - show_state: false
    show_name: false
    camera_view: auto
abstract token
#

Got a similar issue with the week planner card, I also want to combine it with a todo list. When I add the planner card alone it looks like this

#

When I use the same code like this guy here:

https://community.home-assistant.io/t/family-calendar/703986

it looks like that:

Whatever I do, change view to sidepanel, the page gets white. Any other has not any changes really

abstract token