Dashboard card placement help

Configuration Frontend
1

Hey - apologies for the newbie question, but I’m stuck and need some advice on the best way to achieve my desired layout.

The problem I have is with the sizing of the cards on my dashboard when used with my tablet. On the PC screen the gap at either side of the screen isn’t too bad, but on my tablet it looks quite pronounced and I would like to remove it by making the current cards fit the screen. I have tried with card-mod and CSS, but i’m struggling to get it anywhere near to what I want.

The back bars are what i’m looking to reduce:

Screenshot 2023-07-02 at 14.56.16
Screenshot 2023-07-02 at 14.56.161920×1289 174 KB

This is my current code, any advice would be appreciated.

title: test
views:
  - path: default_view
    title: Home
    background: >-
      center / cover no-repeat fixed
      url('https://w0.peakpx.com/wallpaper/334/304/HD-wallpaper-plain-sage-green-sage-green.jpg')
    theme: noctis
    subview: false
    icon: mdi:sofa
    badges: []
    cards:
      - square: false
        type: grid
        cards:
          - type: media-control
            entity: media_player.living_room
            volume_controls:
              - volume_buttons
              - volume_set
              - volume_mute
          - type: custom:mini-media-player
            entity: media_player.living_room
            name: Volume
            volume_stateless: false
            group: false
            toggle_power: true
            source: icon
            artwork: material
            hide:
              name: null
              icon: true
              info: t
              power: true
              source: true
              mute: true
              controls: true
            sound_mode: full
            replace_mute: next
            info: scroll
            scale: '1'
          - show_current: true
            show_forecast: true
            type: weather-forecast
            entity: weather.forecast_home
            theme: noctis
            name: Abbey Meads
          - type: custom:hourly-weather
            entity: weather.forecast_home_hourly
            offset: '0'
            label_spacing: '2'
            icons: true
            show_wind: speed
            show_precipitation_amounts: false
            show_precipitation_probability: true
            name: Next Hour
            theme: noctis
        columns: 1
      - square: true
        type: grid
        cards:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.living_room
            icon: mdi:bed-double-outline
            name: Lounge
            show_state: false
            theme: noctis
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.office
            name: Office
            show_state: false
            icon: mdi:email
            theme: noctis
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.bedroom
            name: Bedroom
            icon: mdi:bed
            theme: noctis
      - square: false
        type: grid
        cards:
          - type: custom:mushroom-light-card
            entity: light.living_room
            fill_container: true
            name: Lounge
            icon: mdi:brightness-4
            show_brightness_control: true
            primary_info: none
            secondary_info: none
            icon_type: none
            collapsible_controls: true
            layout: horizontal
          - type: custom:mushroom-light-card
            entity: light.office
            fill_container: true
            name: Lounge
            icon: mdi:brightness-4
            show_brightness_control: true
            primary_info: none
            secondary_info: none
            icon_type: none
            collapsible_controls: true
            layout: horizontal
          - type: custom:mushroom-light-card
            entity: light.bedroom
            fill_container: true
            name: Lounge
            icon: mdi:brightness-4
            show_brightness_control: true
            primary_info: none
            secondary_info: none
            icon_type: none
            collapsible_controls: true
            layout: horizontal
      - type: grid
        cards:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: binary_sensor.garage_door
            name: Garage Door
            show_state: true
            state_color: true
            icon: mdi:garage-lock
            theme: noctis
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: binary_sensor.garage_door
            show_state: true
            state_color: true
            icon: mdi:door-sliding-lock
            theme: noctis
            name: Patio Door
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: binary_sensor.garage_door
            name: Side Door
            show_state: true
            state_color: true
            icon: mdi:door-closed-lock
            theme: noctis
kiosk_mode:
  hide_header: true
  '-users': displays

````Preformatted text`

2

Have you tried setting the view type to panel?

3

Hey - yes, panel view only supports one card and results in each card being displayed across the entire screen.

4

What i do wonder is why you use “Grid” … the first Grid you have column 1, the REST, no “column” defined at all, spite the fact in LAST “grid” you have 3 entities/cards

So to me there seems 1. no reasons for you to use grid in your “layout” 2. your grids is not defined properly, and seems to have NO purpose

Ahh, sorry, i just see now, in the bottom “Kiosk-mode” , i guess you should mention this in your Topic-header, and search in Kiosk-mode designs

5

Honestly, this is probably a hangover from me trying to set up a css grid and align the cards and trying to use card-mod to get the alignment i’m looking for.

6

That’s right. The way to deal with that is to place all your existing cards in a vertical stack so that there is a single card containing all the others. If you want something more complex, you can make each layer of the vertical stack a horizontal stack or a grid.

image
image1852×1034 79.1 KB

1 Like
7

Thank you, I will give it another try using this method. Would you be able to post your code of this so I can try and copy it with my cards? Apologies, if this is simple, I’m still learning and there’s a lot to learn! :slight_smile:

8

Here it is (though to be honest I find this sort of thing much easier to figure out in the UI).

type: vertical-stack
cards:
  - type: thermostat
    entity: climate.hallway
  - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: false
        type: button
        tap_action:
          action: toggle
      - show_name: false
        show_icon: false
        type: button
        tap_action:
          action: toggle
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        show_state: false
        entity: input_boolean.heating_boost
        name: Boost
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: input_boolean.heating_eco
        name: Eco
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: none
        entity: sensor.living_room_motion_sensor_temperature
        show_state: true
        name: Living room
        icon: mdi:sofa
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: input_boolean.heating_on_off
        name: On/Off
      - show_name: false
        show_icon: false
        type: button
        tap_action:
          action: toggle
      - show_name: false
        show_icon: false
        type: button
        tap_action:
          action: toggle
  - type: horizontal-stack
    cards:
      - type: custom:mini-graph-card
        name: Ground floor
        entities:
          - entity: sensor.living_room_motion_sensor_temperature
          - entity: sensor.kitchen_motion_sensor_temperature
        line_width: 2
        show:
          labels: true
          points: true
      - type: custom:mini-graph-card
        name: First floor
        entities:
          - entity: sensor.hallway_motion_sensor_temperature
          - entity: sensor.study_motion_sensor_temperature
          - entity: sensor.bathroom_motion_sensor_temperature
        line_width: 2
        show:
          labels: true
          points: true
      - type: custom:mini-graph-card
        name: Top floor
        entities:
          - entity: sensor.bedroom_motion_sensor_temperature
          - entity: sensor.landing_motion_sensor_temperature
          - entity: sensor.wirelesstag_roof_space_temperature
        line_width: 2
        show:
          labels: true
          points: true

I should add that this is designed for tablet wall panels, which all use a dark theme with no card borders, so the padding buttons in the second row of the stack disappear.

image
image1848×983 66.3 KB

9

Your Dashboard looks really really good! Thank you, I will let you know how I get on!

10

Thank you!! that works just as I wanted!

I needed to get my head around nesting horizontal stacks in vertical stacks as it’s really hard to imagine it when you’re not 100% sure of what you need.

Thank you so much for your help! I’m not going to try as remove the borders like yours as it looks very cool!

11

No Needs to apologies, it first get “simple” when you know howto, AND with HA !, yes alot to learn, and there is/will always be “new” things to learn :grin:

1 Like