Unable to position custom card side by side

Configuration Frontend
1

Hello,
I am currently creating a dashboard for my virtualization and would like to place all the cards side by side like HA normally does.

But I have the problem that the maps are always arranged one below the other and therefore also the problem on the computer that the page becomes very long due to the number of servers.
My simple could place the cards next to each other like in the other Dahsboards.

Any idea what could be causing the problem?

Attached is a draft:

id: tv01_status
type: custom:config-template-card
variables:
  - states['sensor.pve01_tv01_101_memory_total'].state
  - states['sensor.pve01_cs01_100_memory_used'].state
  - states['sensor.pve01_cs01_100_disk_total'].state
  - states['sensor.pve01_cs01_100_disk_used'].state
entities:
  - sensor.pve01_cs01_100_disk_free_percentage
  - sensor.pve01_cs01_100_disk_total
  - sensor.pve01_cs01_100_disk_free_percentage
  - sensor.pve01_cs01_100_memory_used
  - sensor.pve01_cs01_100_cpu_used
card:
  type: entities
  show_header_toggle: 'off'
  style: |
    .card-header {
      padding: 0px 0px 0px 0px !important;
    }
  entities:
    - type: section
      label: ${ 'tv01 - TVHeadend Server' }
    - type: custom:hui-element
      card_type: vertical-stack
      cards:
        - type: horizontal-stack
          cards:
            - type: vertical-stack
              cards:
                - type: entities
                  show_name: false
                  show_icon: false
                  entities:
                    - entity: binary_sensor.pve01_cs01_100_status
                      name: System
                      show_icon: false
                    - entity: sensor.pve01_cs01_100_uptime
                      name: Reboot
                - type: glance
                  show_name: false
                  entities:
                    - entity: binary_sensor.pve01_cs01_100_status
                      show_state: false
                    - entity: button.pve01_cs01_100_reboot
                      show_state: false
                    - entity: button.pve01_cs01_100_shutdown
                      show_state: false
                    - entity: button.pve01_cs01_100_start
                      show_state: false
        - type: custom:bar-card
          show_icon: true
          align: split
          columns: 1
          max: 100
          positions:
            icon: inside
            indicator: inside
            name: inside
            value: inside
          unit_of_measurement: '%'
          severity:
            - value: 50
              color: '#3498db'
            - value: 75
              color: '#f39c12'
            - value: 100
              color: '#e45e65'
          style: |
            ha-card { 
                --paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
                --ha-card-background: "rgba(0, 0, 0, 0.0)";
                --paper-item-icon-color: 'var(--text-primary-color';
                --ha-card-box-shadow: 'none';
            }
          entities:
            - entity: sensor.pve01_cs01_100_cpu_used
          name: CPU
          entity_row: true
        - type: custom:bar-card
          show_icon: true
          align: split
          columns: 1
          max: 100
          positions:
            icon: inside
            indicator: inside
            name: inside
            value: inside
          unit_of_measurement: '%'
          severity:
            - value: 50
              color: '#3498db'
            - value: 75
              color: '#f39c12'
            - value: 100
              color: '#e45e65'
          style: |
            ha-card { 
                --paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
                --ha-card-background: "rgba(0, 0, 0, 0.0)";
                --paper-item-icon-color: 'var(--text-primary-color';
                --ha-card-box-shadow: 'none';
            }
          entities:
            - entity: sensor.pve01_cs01_100_memory_free_percentage
          name: ${ 'RAM (' + vars[1] + 'Gb/' + vars[0] + 'Gb)' }
          entity_row: true
        - type: custom:bar-card
          show_icon: true
          align: split
          columns: 1
          max: 100
          positions:
            icon: inside
            indicator: inside
            name: inside
            value: inside
          unit_of_measurement: '%'
          severity:
            - value: 50
              color: '#3498db'
            - value: 75
              color: '#f39c12'
            - value: 100
              color: '#e45e65'
          style: |
            ha-card { 
                --paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
                --ha-card-background: "rgba(0, 0, 0, 0.0)";
                --paper-item-icon-color: 'var(--text-primary-color';
                --ha-card-box-shadow: 'none';
            }
          entities:
            - entity: sensor.pve01_cs01_100_disk_free_percentage
          name: ${ 'Disk (' + vars[2] + 'Gb/' + vars[3] + 'Gb)' }
          entity_row: true
2
3

Hi,
I already know the horizontal Stack Card, but thats not working.
At the End, it looks like the attachment.

grafik
grafik514Ă—786 26.3 KB

4

Suggest you to post a simplified code - w/o card-mod, severity, positions for bar-card.
Currently your code is not easy to analyse.

5

If didn’t make a difference.
If i add a second bar-card in the dashboard it would automaticly get placed below.

But on the other side if I use buttons, the get ordered side by side.

  - theme: Backend-selected
    title: Server
    path: server
    icon: mdi:server
    subview: false
    badges: []
    cards:
      - type: custom:bar-card
        entities:
          - entity: sensor.pve01_tv01_101_disk_free_percentage
            name: test
      - type: custom:bar-card
        entities:
          - entity: sensor.pve01_tv01_101_disk_free_percentage
            name: test

grafik

6

By default in a default masonry view layout all cards are placed dependingly on their height: the 1st card is placed, the 2nd card may be placed either below the 1st card or on the right.
Buttons are only placed side-by-side when they are in a stack card (horiz stack, grid) or when they are inside Entities card (related to “chip” buttons).
To place 2 bars side-by-side - use horizontal stack.

1 Like