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.