Using New Grid Card On Top Of Picture-Elements Card

Tags: #<Tag:0x00007f32669f59d0>

I am trying to add the new grid card on the top of a picture-element, which I’ve achieved using the custom:vertical-stack-on-card element

But - the grid is larger than the height of the picture-element image, so only the top half of the grid is showing. I would like the picture-element image to be static (as a sort of background) and the grid card to be able to scroll down past the static image.

Im using Official HassOS Image with Home Assistant version 0.118.2

This is my second view for an iPad built into the wall in the kitchen.
It shows the floorplan blurred out in the background with an overlaid grid on top.

The bottom part of the grid card is not scrollable and therefore I cannot reach half of the entities at the bottom.

I have tried altering the styles: top, left, height, width etc in F12 developer tools, but shifting the height attribute squashes the height of the card down but not the content. I’ve tried adjusting the styles in both the picture-elements card and the vertical-stack-in-card elements, but have not been able to achieve the grid card not getting cut off.

Below is a portion of the code that handles overlaying the grid card (I’ve cut off the end as its just a long list of entities) - on top of the image element. There are also other elements below this code to handle the sidebar to the left.

I initially used the code from LukeVink - which is working fine and has taken months to personalize - while also learning HASS from scratch.

 https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417

Anyway, heres the grid-card code in its own view;

  - title: Mobile
    path: mobile
    icon: 'mdi:large-grid'
    theme: ''
    panel: true
    badges: []
    cards:
      - type: picture-elements
        image: /local/ui/floorplan/kitchen-blur.png
        style: |
          ha-card {
            background: rgba(42, 46, 48, 1)
            position: fixed
          }
        elements:
          - type: 'custom:vertical-stack-in-card'
            layout: vertical
            style:
              height: 120%
              width: 50%
              top: 50%
              left: 62%
            cards:
                - type: grid
                  title: Kitchen Control
                  square: true
                  columns: 3
                  cards:
                    - type: picture-entity
                      entity: group.kitchen_all
                      image: /local/ui/floorplan/kitchen-day.png
                      name: All
                    - type: entity
                      entity: sensor.kitchen_leds_temperature
                      name: Temp
                    - type: entity
                      entity: sensor.kitchen_leds_humidity
                      name: Humid

                  -----------  More Elements Here -------------

…is there an easy way that I can achieve scrolling, as I’ve been playing with different custom card arrangements for 2-1/2 days now with only little success.

Many thanks for your time reading - I can add any more information as required.

1 Like

did you get it to work? I’m facing the same exact issue.