Advanced Room Card allign Content

Configuration Frontend
1

Hey there,

i did some modification to the advanced Room Card.

However, i cant figure out why the first Room Card is not in line with the room card nearby.

image
image459×676 10.6 KB

Can anyone tell me what i am doing wrong?

square: false
type: grid
cards:
  - type: custom:button-card
    name: null
    icon: mdi:sofa
    icon_color: '#4d4d4d'
    custom_fields:
      temp: >
        [[[ return states['sensor.se_temperatursensor_temperature'].state + '°C'
        ]]]
      hum: |
        [[[ return states['sensor.se_temperatursensor_humidity'].state + '%' ]]]
      btn1:
        card:
          type: custom:mushroom-light-card
          entity: light.la_stehlampe
          primary_info: none
          secondary_info: none
          tap_action:
            action: toggle
          icon: mdi:floor-lamp
      btn2:
        card:
          type: custom:mushroom-light-card
          entity: light.li_hintergrundschreibtisch
          primary_info: none
          secondary_info: none
          tap_action:
            action: toggle
          icon: mdi:television-ambient-light
      btn3:
        card:
          type: custom:mushroom-light-card
          entity: light.li_hintergrundschreibtisch
          primary_info: none
          secondary_info: none
          tap_action:
            action: toggle
          icon: mdi:television-ambient-light
    styles:
      grid:
        - grid-template-areas: '"n n n" "temp temp temp" "hum hum hum" ". btn1 btn2 " ". btn3 btn3"'
        - grid-template-columns: 1fr min-content min-content
        - grid-template-rows: repeat(2, min-content) repeat(2, min-content)
      card:
        - padding: 22px 8px 8px 22px
        - height: 200px
      custom_fields:
        temp:
          - justify-self: start
          - font-size: 14px
          - opacity: '0.7'
          - padding-top: 10px
        hum:
          - justify-self: start
          - font-size: 14px
          - opacity: '0.7'
        btn1:
          - grid-area: btn1
          - justify-content: center
          - align-self: start
          - padding-top: 0px
        btn2:
          - grid-area: btn2
          - justify-content: center
          - align-self: start
        btn3:
          - grid-area: btn3
          - justify-content: center
          - align-self: start
      name:
        - justify-self: start
        - font-size: 18px
        - font-weight: 500
        - color: white
      img_cell:
        - justify-content: start
        - position: absolute
        - width: 100px
        - height: 100px
        - left: 0
        - bottom: 0
        - margin: 0 0 -20px -20px
        - background: '#b5b5b5'
        - border-radius: 500px
      icon:
        - position: relative
        - width: 40px
        - color: black
        - opacity: '0.8'
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: ''
      - type: grid
        square: false
        columns: 1
        cards:
          - type: custom:button-card
            name: null
            icon: mdi:bed
            icon_color: '#4d4d4d'
            custom_fields:
              temp: >
                [[[ return
                states['sensor.se_temperatursensor_temperature'].state + '°C'
                ]]]    
              hum: >
                [[[ return states['sensor.se_temperatursensor_humidity'].state +
                '%' ]]]
              btn1:
                card:
                  type: custom:mushroom-light-card
                  entity: light.schlafzimmer
                  primary_info: none
                  secondary_info: none
                  tap_action:
                    action: toggle
                  icon: mdi:ceiling-light
              btn2:
                card:
                  type: custom:mushroom-light-card
                  entity: light.st_lichterkettesz
                  primary_info: none
                  secondary_info: none
                  tap_action:
                    action: toggle
                  icon: mdi:string-lights
            styles:
              grid:
                - grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
                - grid-template-columns: 1fr min-content min-content
                - grid-template-rows: min-content min-content min-content 1fr
              card:
                - padding: 22px 8px 22px 22px
                - height: 200px
              custom_fields:
                temp:
                  - justify-self: start
                  - font-size: 14px
                  - opacity: '0.7'
                  - padding-top: 10px
                hum:
                  - justify-self: start
                  - font-size: 14px
                  - opacity: '0.7'
                btn1:
                  - justify-content: end
                  - align-self: start
                btn2:
                  - justify-content: end
                  - align-self: start
                  - padding-left: px
              name:
                - justify-self: start
                - font-size: 18px
                - font-weight: 500
                - color: white
              img_cell:
                - justify-content: start
                - position: absolute
                - width: 100px
                - height: 100px
                - left: 0
                - bottom: 0
                - margin: 0 0 -20px -20px
                - background: '#b5b5b5'
                - border-radius: 500px
              icon:
                - position: relative
                - width: 40px
                - color: black
                - opacity: '0.8'
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: ''
      - type: grid
        square: false
        columns: 1
        cards:
          - type: custom:button-card
            name: null
            icon: mdi:silverware-fork-knife
            icon_color: '#4d4d4d'
            custom_fields:
              temp: >
                [[[ return
                states['sensor.se_temperatursensor_temperature'].state + '°C'
                ]]]    
              hum: >
                [[[ return states['sensor.se_temperatursensor_humidity'].state +
                '%' ]]]
              btn1:
                card:
                  type: custom:mushroom-light-card
                  entity: light.st_kuchenlicht
                  primary_info: none
                  secondary_info: none
                  tap_action:
                    action: toggle
                  icon: mdi:ceiling-light
              btn2:
                card:
                  type: custom:mushroom-light-card
                  entity: binary_sensor.bwm_kuche_occupancy
                  primary_info: none
                  secondary_info: none
                  tap_action:
                    action: toggle
                  icon: mdi:motion-sensor
            styles:
              grid:
                - grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
                - grid-template-columns: 1fr min-content min-content
                - grid-template-rows: min-content min-content min-content 1fr
              card:
                - padding: 22px 8px 22px 22px
                - height: 200px
              custom_fields:
                temp:
                  - justify-self: start
                  - font-size: 14px
                  - opacity: '0.7'
                  - padding-top: 10px
                hum:
                  - justify-self: start
                  - font-size: 14px
                  - opacity: '0.7'
                btn1:
                  - justify-content: end
                  - align-self: start
                btn2:
                  - justify-content: end
                  - align-self: start
                  - padding-left: px
              name:
                - justify-self: start
                - font-size: 18px
                - font-weight: 500
                - color: white
              img_cell:
                - justify-content: start
                - position: absolute
                - width: 100px
                - height: 100px
                - left: 0
                - bottom: 0
                - margin: 0 0 -20px -20px
                - background: '#b5b5b5'
                - border-radius: 500px
              icon:
                - position: relative
                - width: 40px
                - color: black
                - opacity: '0.8'
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: ''
      - type: grid
        square: false
        columns: 1
        cards:
          - type: custom:button-card
            name: null
            icon: mdi:paper-roll
            icon_color: '#4d4d4d'
            custom_fields:
              temp: >
                [[[ return
                states['sensor.se_temperatursensor_temperature'].state + '°C'
                ]]]    
              hum: >
                [[[ return states['sensor.se_temperatursensor_humidity'].state +
                '%' ]]]
              btn1:
                card:
                  type: custom:mushroom-light-card
                  entity: light.li_bad
                  primary_info: none
                  secondary_info: none
                  tap_action:
                    action: toggle
                  icon: mdi:ceiling-light
              btn2:
                card:
                  type: custom:mushroom-light-card
                  entity: binary_sensor.bwm_bad_occupancy
                  primary_info: none
                  secondary_info: none
                  tap_action:
                    action: toggle
                  icon: mdi:motion-sensor
            styles:
              grid:
                - grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
                - grid-template-columns: 1fr min-content min-content
                - grid-template-rows: min-content min-content min-content 1fr
              card:
                - padding: 22px 8px 22px 22px
                - height: 200px
              custom_fields:
                temp:
                  - justify-self: start
                  - font-size: 14px
                  - opacity: '0.7'
                  - padding-top: 10px
                hum:
                  - justify-self: start
                  - font-size: 14px
                  - opacity: '0.7'
                btn1:
                  - justify-content: end
                  - align-self: start
                btn2:
                  - justify-content: end
                  - align-self: start
                  - padding-left: px
              name:
                - justify-self: start
                - font-size: 18px
                - font-weight: 500
                - color: white
              img_cell:
                - justify-content: start
                - position: absolute
                - width: 100px
                - height: 100px
                - left: 0
                - bottom: 0
                - margin: 0 0 -20px -20px
                - background: '#b5b5b5'
                - border-radius: 500px
              icon:
                - position: relative
                - width: 40px
                - color: black
                - opacity: '0.8'
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: ''
      - type: grid
        square: false
        columns: 1
        cards:
          - type: custom:button-card
            name: null
            icon: mdi:desktop-classic
            icon_color: '#4d4d4d'
            custom_fields:
              temp: >
                [[[ return
                states['sensor.se_temperatursensor_temperature'].state + '°C'
                ]]]    
              hum: >
                [[[ return states['sensor.se_temperatursensor_humidity'].state +
                '%' ]]]
              btn1:
                card:
                  type: custom:mushroom-light-card
                  entity: light.li_hintergrundschreibtisch
                  primary_info: none
                  secondary_info: none
                  tap_action:
                    action: toggle
                  icon: mdi:television-ambient-light
              btn2:
                card:
                  type: custom:mushroom-light-card
                  entity: switch.desk_light
                  primary_info: none
                  secondary_info: none
                  tap_action:
                    action: toggle
                  icon: phu:salt-lamp
            styles:
              grid:
                - grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
                - grid-template-columns: 1fr min-content min-content
                - grid-template-rows: min-content min-content min-content 1fr
              card:
                - padding: 22px 8px 22px 22px
                - height: 200px
              custom_fields:
                temp:
                  - justify-self: start
                  - font-size: 14px
                  - opacity: '0.7'
                  - padding-top: 10px
                hum:
                  - justify-self: start
                  - font-size: 14px
                  - opacity: '0.7'
                btn1:
                  - justify-content: end
                  - align-self: start
                btn2:
                  - justify-content: end
                  - align-self: start
                  - padding-left: px
              name:
                - justify-self: start
                - font-size: 18px
                - font-weight: 500
                - color: white
              img_cell:
                - justify-content: start
                - position: absolute
                - width: 100px
                - height: 100px
                - left: 0
                - bottom: 0
                - margin: 0 0 -20px -20px
                - background: '#b5b5b5'
                - border-radius: 500px
              icon:
                - position: relative
                - width: 40px
                - color: black
                - opacity: '0.8'
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: ''
      - type: grid
        square: false
        columns: 1
        cards:
          - type: custom:button-card
            name: null
            icon: phu:3dprinter-printing
            icon_color: '#4d4d4d'
            custom_fields:
              temp: >
                [[[ return
                states['sensor.se_temperatursensor_temperature'].state + '°C'
                ]]]    
              hum: >
                [[[ return states['sensor.se_temperatursensor_humidity'].state +
                '%' ]]]
              btn1:
                card:
                  type: custom:mushroom-light-card
                  entity: switch.printer
                  primary_info: none
                  secondary_info: none
                  tap_action:
                    action: toggle
                  icon: mdi:power-plug
              btn2:
                card:
                  type: custom:mushroom-light-card
                  entity: image.a1_kamera
                  primary_info: none
                  secondary_info: none
                  tap_action:
                    action: more-info
                  icon: mdi:video
            styles:
              grid:
                - grid-template-areas: '"n btn1 btn2" "temp btn1 btn2" "hum btn1 btn2" "i btn1 btn2"'
                - grid-template-columns: 1fr min-content min-content
                - grid-template-rows: min-content min-content min-content 1fr
              card:
                - padding: 22px 8px 22px 22px
                - height: 200px
              custom_fields:
                temp:
                  - justify-self: start
                  - font-size: 14px
                  - opacity: '0.7'
                  - padding-top: 10px
                hum:
                  - justify-self: start
                  - font-size: 14px
                  - opacity: '0.7'
                btn1:
                  - justify-content: end
                  - align-self: start
                btn2:
                  - justify-content: end
                  - align-self: start
                  - padding-left: px
              name:
                - justify-self: start
                - font-size: 18px
                - font-weight: 500
                - color: white
              img_cell:
                - justify-content: start
                - position: absolute
                - width: 100px
                - height: 100px
                - left: 0
                - bottom: 0
                - margin: 0 0 -20px -20px
                - background: '#b5b5b5'
                - border-radius: 500px
              icon:
                - position: relative
                - width: 40px
                - color: black
                - opacity: '0.8'
columns: 2
2

Hi, you have this code in every button card but not in the first one, that’s why is not aligned.

The code do nothing if you are not going to add a title you can remove it in every card or just add it to the first one

3

Thank you so much. I spent countless time on comparing the code but didnt see that im missing the vertical stack.

Do you know how i can reduce the Gap below/above the Cards?

4

If I’m not wrong the gap is caused because de mushroom title card take some space even empty. If you remove the code with vertical stack and the mushroom title the gap will be gone. I do not see the need of this code. With the button cards inside the grid should be enough.