Nope, css alignment and spacing is just a big topic with a lot to learn. You’ll be at it for a very long while before it becomes comfortable.
There are really only two issues keeping this from being what you want:
In the block you’ve defined as the flex parent, you have given it a flex direction so the items are properly in a column. However, you have not told it how to space the children out. By default a flex box will take up the minimum space required to show the children as they are defined, so right now your column is the minimum height, not the entire height of the page. Take a look at the justify-content section of the flexbox guide (you are probably looking for something like space-between or space-evenly).
Even if you set the justify-content property, you won’t yet see any changes because the block that is doing the flex spacing will try to fill the entire height of it’s parent, but it’s parent is not the page! You have an extra f7-block at the beginning of the widget (which again, without any other setting, is trying to be as small as it can be and still hold all its children). So the flexbox will fill 100% of its parent but it’s parent is smaller than the page so you won’t see the effects you are expecting.
Note the earlier post when I showed that you really only need a single f7-block to house the rest of the widget.
Combine the two f7-blocks into one with the flex styling and add the correct justify-content and you’ll be off to the races.
@Nic0205 Hope that helps -see attachment: It’s just what i have in my mind from a user point of view re alignment and justification under Justin’s direction, advice and support. Pls tell me what you think.
@JustinG -Thanks for helping us Master Justin!
Cheers Allign.pdf (69.9 KB)
I have started to create the icon set(s). For the next week I’ll be working on this.
All will be .svg. Regarding states, I’m planning to follow OH rules for dynamic icons.
You haven’t even started =) Doors, windows, motion, leakage, lights, dimmers, colorpickers, media, temperature, humidity, co, gates, crops watering, energy, battery and so on, and so on, and everything with dynamic icons-colors-pictures.
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
Good evening @hmerk ,
If you define as sources the standard OH or f7 icons, i have checked both thoroughly failed to find ones suitable for our design.
f7 provides extremely well designed and directly accessible icons but the collection misses a lot -if not all- of the equipment specific icons - that’s exactly what we need now.
If you have a hint for us to find commercial free - well designed icons pls let us know!
I appreciate your response.
All is fine as long as the content is not longer than the block / the screen. The footer is still at the bottom - but at the bottom of the page and not the actual screen.
For example this code:
uid: demo:responsive_height1
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Aug 22, 2022, 10:41:05 PM
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: 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: 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: 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
Iconify has limited usage, cause it requires internet connection. Check @martiniman icons, or feed Openhab with your own, i totally agree with you that f7 are better styled, but not designed for smart home use case.
Generally yes, but if your read @ysc post , openHAB is caching the icons and you can import the font files for offline usage.
Therefore there is no need for a permanent internet connection.
I think the problem is the width of the first block which holds the other blocks is not wide enough and I need another time a relative width. Is there something like for the height to be noted?
