I suspect this is the exact same problem as before. With css, unless you set properties that mean otherwise, every element is always just looking at it’s direct parent and direct children for sizing information. In this case, by adding the widget to a page inside the cell grid, the cell grid is now the parent of the widget. Unless you give the widget a definite height, the cell grid is just going to be the minimum height it needs to be to contain the widget at it’s minimum spacing. So to make sure that your widget also fills a page you have to make sure 1) that the widget always fills the full height of the cell grid and 2) the cell grid fills the full height of the page. The problem here is that OH puts a lot of other pieces “under the hood” so a cell grid is not just a single element.
So, your instinct was correct; you want to set the actual height of the widget, but to a responsive value, not an absolute value. In this case I would the css length unit of vh which equals 1% of the height of the browser window. So 100vh equals the whole height of the browser window. However, there are some pieces of the OH MainUI that are in the way (the top and bottom toolbar) so you have to subtract those elements that are already taking up some space on the window. If you use the page inspector in your browser, eventually you will find that those have heights set by some f7 variables. So to calculate the exact, responsive height the widget should be you would need something like this:
uid: demo:responsive_height
tags: []
props:
parameters: []
parameterGroups: []
component: f7-block
config:
style:
height: calc(100vh - var(--f7-toolbar-height) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-safe-area-top))
width: 100%
margin: 0
padding: 0
display: flex
flex-direction: column
justify-content: space-between
slots:
default:
- component: Label
config:
text: The top of the block
style:
flex: 0 0 0
- component: f7-block
config:
style:
flex: 1 1 auto
slots:
default:
- component: f7-card
config:
title: The middle content
content: With some stuff
- component: f7-card
config:
title: The middle content
content: and some other some stuff
- component: Label
config:
text: The bottom of the block
style:
flex: 0 0 0
