Change card alignment

Configuration Frontend
,
1

Hello all!
Can someone help me to horizontally center the buttons inside the card space? I would like to distribute the cards within the card space, not leaving the right empty space shown by an arrow.

pic1
pic1971×502 48.9 KB

Thanks!

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: switch.relay_switch_c
        icon: 'mdi:lightbulb'
        label: Área de Serviço1
        show_state: true
        show_label: true
        styles:
          card:
            - border-radius: 15px
            - height: 110px
            - width: 120px
            - margin: 0px 0px 0px 0px
            - padding: 0px 0px
            - justify-self: center
            - align-self: center
          icon:
            - align-self: end
            - width: 28px
            - height: 28px
            - filter: 'drop-shadow(0px 0px 1px rgba(0,0,0,1))'
          label:
            - justify-self: center
            - align-self: end
            - padding: 9px 10px
            - font-size: 12px
          name:
            - justify-self: center
            - padding: 0px 0px
            - font-size: 14px
          state:
            - font-size: 11px
            - font-family: Helvetica
            - text-transform: capitalize
            - font-weight: bold
            - align-self: end
            - justify-self: center
            - padding: 9px 10px
          grid:
            - grid-template-areas: '"l" "i" "n" "s"'
            - grid-template-rows: min-content 1fr min-content min-content
            - grid-template-columns: 1fr
      - type: 'custom:button-card'
        entity: switch.relay_switch_c
        icon: 'mdi:lightbulb'
        label: Área de Serviço2
        show_state: true
        show_label: true
        styles:
          card:
            - border-radius: 15px
            - height: 110px
            - width: 120px
            - margin: 0px 0px 0px 0px
            - padding: 0px 0px
            - justify-self: center
            - align-self: center
          icon:
            - align-self: end
            - width: 28px
            - height: 28px
            - filter: 'drop-shadow(0px 0px 1px rgba(0,0,0,1))'
          label:
            - justify-self: center
            - align-self: end
            - padding: 9px 10px
            - font-size: 12px
          name:
            - justify-self: center
            - padding: 0px 0px
            - font-size: 14px
          state:
            - font-size: 11px
            - font-family: Helvetica
            - text-transform: capitalize
            - font-weight: bold
            - align-self: end
            - justify-self: center
            - padding: 9px 10px
          grid:
            - grid-template-areas: '"l" "i" "n" "s"'
            - grid-template-rows: min-content 1fr min-content min-content
            - grid-template-columns: 1fr
      - type: 'custom:button-card'
        entity: switch.relay_switch_c
        icon: 'mdi:lightbulb'
        label: Área de Serviço3
        show_state: true
        show_label: true
        styles:
          card:
            - border-radius: 15px
            - height: 110px
            - width: 120px
            - margin: 0px 0px 0px 0px
            - padding: 0px 0px
            - justify-self: center
            - align-self: center
          icon:
            - align-self: end
            - width: 28px
            - height: 28px
            - filter: 'drop-shadow(0px 0px 1px rgba(0,0,0,1))'
          label:
            - justify-self: center
            - align-self: end
            - padding: 9px 10px
            - font-size: 12px
          name:
            - justify-self: center
            - padding: 0px 0px
            - font-size: 14px
          state:
            - font-size: 11px
            - font-family: Helvetica
            - text-transform: capitalize
            - font-weight: bold
            - align-self: end
            - justify-self: center
            - padding: 9px 10px
          grid:
            - grid-template-areas: '"l" "i" "n" "s"'
            - grid-template-rows: min-content 1fr min-content min-content
            - grid-template-columns: 1fr
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: switch.relay_switch_c
        icon: 'mdi:lightbulb'
        label: Área de Serviço4
        show_state: true
        show_label: true
        styles:
          card:
            - border-radius: 15px
            - height: 110px
            - width: 120px
            - margin: 0px 0px 0px 0px
            - padding: 0px 0px
            - justify-self: center
            - align-self: center
          icon:
            - align-self: end
            - width: 28px
            - height: 28px
            - filter: 'drop-shadow(0px 0px 1px rgba(0,0,0,1))'
          label:
            - justify-self: center
            - align-self: end
            - padding: 9px 10px
            - font-size: 12px
          name:
            - justify-self: center
            - padding: 0px 0px
            - font-size: 14px
          state:
            - font-size: 11px
            - font-family: Helvetica
            - text-transform: capitalize
            - font-weight: bold
            - align-self: end
            - justify-self: center
            - padding: 9px 10px
          grid:
            - grid-template-areas: '"l" "i" "n" "s"'
            - grid-template-rows: min-content 1fr min-content min-content
            - grid-template-columns: 1fr
      - type: 'custom:button-card'
        entity: switch.relay_switch_c
        icon: 'mdi:lightbulb'
        label: Área de Serviço5
        show_state: true
        show_label: true
        styles:
          card:
            - border-radius: 15px
            - height: 110px
            - width: 120px
            - margin: 0px 0px 0px 0px
            - padding: 0px 0px
            - justify-self: center
            - align-self: center
          icon:
            - align-self: end
            - width: 28px
            - height: 28px
            - filter: 'drop-shadow(0px 0px 1px rgba(0,0,0,1))'
          label:
            - justify-self: center
            - align-self: end
            - padding: 9px 10px
            - font-size: 12px
          name:
            - justify-self: center
            - padding: 0px 0px
            - font-size: 14px
          state:
            - font-size: 11px
            - font-family: Helvetica
            - text-transform: capitalize
            - font-weight: bold
            - align-self: end
            - justify-self: center
            - padding: 9px 10px
          grid:
            - grid-template-areas: '"l" "i" "n" "s"'
            - grid-template-rows: min-content 1fr min-content min-content
            - grid-template-columns: 1fr
      - type: 'custom:button-card'
        entity: switch.relay_switch_c
        icon: 'mdi:lightbulb'
        label: Área de Serviço6
        show_state: true
        show_label: true
        styles:
          card:
            - border-radius: 15px
            - height: 110px
            - width: 120px
            - margin: 0px 0px 0px 0px
            - padding: 0px 0px
            - justify-self: center
            - align-self: center
          icon:
            - align-self: end
            - width: 28px
            - height: 28px
            - filter: 'drop-shadow(0px 0px 1px rgba(0,0,0,1))'
          label:
            - justify-self: center
            - align-self: end
            - padding: 9px 10px
            - font-size: 12px
          name:
            - justify-self: center
            - padding: 0px 0px
            - font-size: 14px
          state:
            - font-size: 11px
            - font-family: Helvetica
            - text-transform: capitalize
            - font-weight: bold
            - align-self: end
            - justify-self: center
            - padding: 9px 10px
          grid:
            - grid-template-areas: '"l" "i" "n" "s"'
            - grid-template-rows: min-content 1fr min-content min-content
            - grid-template-columns: 1fr
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        entity: switch.relay_switch_c
        icon: 'mdi:lightbulb'
        label: Área de Serviço7
        show_state: true
        show_label: true
        styles:
          card:
            - border-radius: 15px
            - height: 110px
            - width: 120px
            - margin: 0px 0px 0px 0px
            - padding: 0px 0px
            - justify-self: center
            - align-self: center
          icon:
            - align-self: end
            - width: 28px
            - height: 28px
            - filter: 'drop-shadow(0px 0px 1px rgba(0,0,0,1))'
          label:
            - justify-self: center
            - align-self: end
            - padding: 9px 10px
            - font-size: 12px
          name:
            - justify-self: center
            - padding: 0px 0px
            - font-size: 14px
          state:
            - font-size: 11px
            - font-family: Helvetica
            - text-transform: capitalize
            - font-weight: bold
            - align-self: end
            - justify-self: center
            - padding: 9px 10px
          grid:
            - grid-template-areas: '"l" "i" "n" "s"'
            - grid-template-rows: min-content 1fr min-content min-content
            - grid-template-columns: 1fr
      - type: 'custom:button-card'
        entity: switch.relay_switch_c
        icon: 'mdi:lightbulb'
        label: Área de Serviço8
        show_state: true
        show_label: true
        styles:
          card:
            - border-radius: 15px
            - height: 110px
            - width: 120px
            - margin: 0px 0px 0px 0px
            - padding: 0px 0px
            - justify-self: center
            - align-self: center
          icon:
            - align-self: end
            - width: 28px
            - height: 28px
            - filter: 'drop-shadow(0px 0px 1px rgba(0,0,0,1))'
          label:
            - justify-self: center
            - align-self: end
            - padding: 9px 10px
            - font-size: 12px
          name:
            - justify-self: center
            - padding: 0px 0px
            - font-size: 14px
          state:
            - font-size: 11px
            - font-family: Helvetica
            - text-transform: capitalize
            - font-weight: bold
            - align-self: end
            - justify-self: center
            - padding: 9px 10px
          grid:
            - grid-template-areas: '"l" "i" "n" "s"'
            - grid-template-rows: min-content 1fr min-content min-content
            - grid-template-columns: 1fr
      - type: 'custom:button-card'
        entity: switch.relay_switch_c
        icon: 'mdi:lightbulb'
        label: Área de Serviço9
        show_state: true
        show_label: true
        styles:
          card:
            - border-radius: 15px
            - height: 110px
            - width: 120px
            - margin: 0px 0px 0px 0px
            - padding: 0px 0px
            - justify-self: center
            - align-self: center
          icon:
            - align-self: end
            - width: 28px
            - height: 28px
            - filter: 'drop-shadow(0px 0px 1px rgba(0,0,0,1))'
          label:
            - justify-self: center
            - align-self: end
            - padding: 9px 10px
            - font-size: 12px
          name:
            - justify-self: center
            - padding: 0px 0px
            - font-size: 14px
          state:
            - font-size: 11px
            - font-family: Helvetica
            - text-transform: capitalize
            - font-weight: bold
            - align-self: end
            - justify-self: center
            - padding: 9px 10px
          grid:
            - grid-template-areas: '"l" "i" "n" "s"'
            - grid-template-rows: min-content 1fr min-content min-content
            - grid-template-columns: 1fr
1 Like
2

I would like to know how to do this also

3

I’ve always found that the horizontal-stack does centre the cards that are in it, but then I don’t use custom:button-card, so that might be different.

Two years on from the original post, I’d probably suggest the (now, not soo new) grid-card as the container for the others.

Although, this is just a vertical-stack with a markdown for the title and a horizontal-stack for each row.

image
image1174×834 38.9 KB

and it centres the cards fine, no card-mod or anything (not for centring anyway)

What have you got that’s not working?

4

I have nested cards, with different types of cards inside each card :joy:

Screenshot_20221017_183134
Screenshot_20221017_1831341080×561 30.6 KB 

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: light.vardagsrum_golvlampa_tv_soffa_light
        name: Läslampa
        secondary_info: none
        fill_container: false
        tap_action:
          action: toggle
        icon: mdi:floor-lamp
        primary_info: none
      - type: custom:mushroom-entity-card
        entity: light.vardagsrum_golvlampa_tv_soffa_light
        layout: horizontal
        name: LampTitle
        secondary_info: name
        fill_container: false
        tap_action:
          action: toggle
        icon: ''
        icon_type: none
        primary_info: state
  - type: custom:my-slider-v2
    entity: light.vardagsrum_golvlampa_tv_soffa_light
    vertical: true
    styles:
      card:
        - height: 140px
        - width: 35px
      container:
        - border-radius: 12px
      track:
        - background: >
            [[[ if (entity.state == "off") return
            "rgba(var(--mush-rgb-disabled), 0.2)";
             else return "rgba(var(--mush-rgb-amber), 0.2)";
            ]]]
      progress:
        - background: >
            [[[ if (entity.state == "off") return
            "rgb(var(--mush-rgb-disabled))";
             else return "rgb(var(--mush-rgb-amber))";
            ]]]      
      thumb:
        - width: 0px
    card_mod:
      style: |
        ha-card {
          padding: 12px 12px 12px;
          margin-left: auto;
        }
      card_mod:
        style: |
          ha-card {
            height: 140x;
          }

And i want to align the second from the top entity card to the BOTTOM…

5

If you’re not too fussed about custom cards and having to do a little learning, I’d advise using the custom:layout-card, and defining a grid.

There are other ways you could maybe do what you want but this is really easy and flexible, once you learn the basics. As a side effect, it can also be used to control the layout of the dashboard view and make some great views for different screen sizes.

I used it in the bottom row here

image
image1252×909 56.9 KB

To give the gauge 23% of the row and allocate the rest to an entities card. (I could have done the whole card with it but find it easier to do it row by row).

grid-template-columns: 23% 1fr
grid-template-rows: auto
place-content: center
grid-template-areas: |
  "a1 a2"

For your layout it might be something like:

grid-template-columns: 2fr 1fr
grid-template-rows: auto
place-content: center
grid-template-areas: |
  "c1 c2"
  "c3 c2"

then add:

view_layout:
  grid-area: c1

to the button top left
put the second button in c3
and the slider in c2

3 Likes
6

@eggman You might have ruined me for other cards after this.
I’ll get to work :smiley:

7

Would you mind sharing the code for your entire card?

8

OK, I had a mission to do as much as I could whilst maintaining the ability to use the GUI editor as much as possible. So, I delved into the depths of using themes and card-mod themes to get the stack-in card effect. This may have been more effort than it was worth. I was also creating a dashboard for the “system”, so something running is good and needs to be not highlighted. Whereas a home automation dashboard highlights something on, like a light. So, more fiddling with colours through styles.

I could hae made the whole thing simpler, if I’d accepted the majority of editing would be yaml. Therer is always a need to drop into yaml, but I’ve retained the ability to use the gui for most…

card

type: vertical-stack
cards:
  - type: markdown
    content: '# Synology DS720'
    theme: stack-in
  - type: horizontal-stack
    cards:
      - type: entity
        entity: update.ds720_dsm_update
        name: DSM Version
        state_color: false
        theme: stack-in-ga
        card_mod:
          style: |
            :host {
              --card-mod-icon-color:
              {% if is_state(config.entity,'on') %}
                var(--paper-item-icon-active-color);
              {% else %}  
                var(--state-icon-color);
              {% endif %} 
            }
      - type: entity
        entity: binary_sensor.ds720_security_status
        name: Security Status
        theme: stack-in-ga
        state_color: true
  - type: horizontal-stack
    cards:
      - type: gauge
        entity: sensor.ds720_cpu_utilization_total
        name: CPU
        needle: true
        severity:
          green: 0
          yellow: 30
          red: 56
        theme: stack-in
        min: 1
        max: 100
      - type: gauge
        entity: sensor.ds720_memory_usage_real
        needle: true
        severity:
          green: 0
          yellow: 50
          red: 75
        name: Memory
        theme: stack-in
      - type: gauge
        entity: sensor.ds720_volume_1_volume_used
        name: Storage
        needle: true
        severity:
          green: 0
          yellow: 70
          red: 85
        theme: stack-in
      - type: gauge
        entity: sensor.ds720_temperature
        name: Temp
        min: 1
        max: 50
        needle: true
        severity:
          green: 0
          yellow: 35
          red: 40
        theme: stack-in
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 23% 1fr
      grid-template-rows: 100%
      place-content: center
      grid-template-areas: |
        "a1 a2"
      grid-gap: 0px
    cards:
      - type: gauge
        name: Disk Temp
        max: 65
        min: 1
        needle: true
        severity:
          green: 0
          yellow: 45
          red: 55
        theme: stack-in
        entity: sensor.ds720_volume_1_maximum_disk_temp
        view_layout:
          grid-area: a1
      - type: entities
        entities:
          - entity: sensor.ds720_drive_1_status
          - entity: sensor.ds720_drive_2_status
        theme: stack-in
        state_color: true
        view_layout:
          grid-area: a2
view_layout:
  grid-area: NAS

themes:

eggytheme:
  # Fonts
  primary-font-family: "Raleway,sans-serif"
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"

  # Cards
  ha-card-border-radius: "10px"

  modes:
    dark:

      # Cards
      ha-card-box-shadow: "1px 1px 5px 0px rgba(40, 40, 40, 1)"
  

  card-mod-theme: eggytheme

  card-mod-view-yaml: |
    grid-layout$:
      hui-vertical-stack-card:
        $: |
          #root {
            background-color: var(--card-background-color, white);
            border-radius: var(--ha-card-border-radius);
            box-shadow: var(--ha-card-box-shadow);
          }

stack-in: &stack-in-common
  # apply to the "stacked-in" card
  ha-card-background: "none"
  ha-card-box-shadow: "none"
  ha-card-border-radius: "0px"
  border-color: "none"
  masonry-view-card-margin: "0px 0px 0px 0px"

  # Enable card-mod
  card-mod-theme: stack-in

  # Make H1 text the same as standard Titles
  card-mod-card-yaml: |
    ha-markdown $: |
      ha-markdown-element h1 {
        font-size: var(--ha-card-header-font-size, 24px);
        font-family: var(--ha-card-header-font-family, inherit);
        font-weight: normal;
      }

    .: |
      .info .value {
        font-size: 18px;  # entity card status text
      }

stack-in-ga:
  <<: *stack-in-common
  state-icon-color: "#659d53"
  state-icon-active-color: "#ffa600"

stack-in-rg:
  <<: *stack-in-common
  state-icon-color: "#c0513f"
  state-icon-active-color: "#659d53"

stack-in-gr:
  <<: *stack-in-common
  state-icon-color: "#659d53"
  state-icon-active-color: "#c0513f"
1 Like
9

whole view

image
image3830×1481 315 KB

1 Like
10

Do you know how to define the width of a card?
And how to align the content inside an area?

11

I define the width of the grid column and let the card use it. Some cards can be hard to align (especially in the vertical axis), as they can take up the whole grid but then not centre their own content. That tends to take some messing around with card_mod.

How far have you got and what’s your specific problem?

12

I cant get the lower left entity to align to bottom and left.
The upper left should align to top and left.

Could you share your code where you align cards inside horizontal or stacked cards?
:smiley:

image

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: light.vardagsrum_golvlampa_tv_soffa_light
        name: Läslampa
        secondary_info: none
        fill_container: false
        tap_action:
          action: toggle
        icon: mdi:floor-lamp
        primary_info: none
      - type: custom:mushroom-entity-card
        entity: light.vardagsrum_golvlampa_tv_soffa_light
        layout: horizontal
        name: LampTitle
        secondary_info: name
        fill_container: false
        tap_action:
          action: toggle
        icon: ''
        icon_type: none
        primary_info: state
  - type: custom:my-slider-v2
    entity: light.vardagsrum_golvlampa_tv_soffa_light
    vertical: true
    styles:
      card:
        - height: 140px
        - width: 35px
      container:
        - border-radius: 12px
      track:
        - background: >
            [[[ if (entity.state == "off") return
            "rgba(var(--mush-rgb-disabled), 0.2)";
             else return "rgba(var(--mush-rgb-amber), 0.2)";
            ]]]
      progress:
        - background: >
            [[[ if (entity.state == "off") return
            "rgb(var(--mush-rgb-disabled))";
             else return "rgb(var(--mush-rgb-amber))";
            ]]]      
      thumb:
        - width: 0px
    card_mod:
      style: |
        ha-card {
          padding: 12px 12px 12px;
          margin-left: auto;
        }
      card_mod:
        style: |
          ha-card {
            height: 140x;
          }
13

As I said, aligning things vertically can be tricky, I wouldn’t do it with a vertical stack, I’d use a custom:layout-card as I said in my first response. That might still need some tweaking, nothing’s perfect, but it’s how I’d try to do it.

I’ve never tried to align items with a vertical stack.