Hi,
Widgets don’t have a standardized height. Is there a way to create columns and add multiple widgets to that column so it behaves in depended of other columns. This you can fill columns in depended of each other.
Basically, I want to achieve this:
Thanks in advance,
Bastiaan
I don’t think so but someone who knows this stuff better may come along and contradict me.
Because the order is creating rows first and then adding the columns, the height of a row is going to be based on the largest widget in the row.
Alternatively, I think that cells will just fit where they fit and flow but then you kind of lose the ability to control the layout since there are no rows or columns. I don’t have a lot of experience with cells though so could be wrong on that.
The layout editor does not have this capability. If you are willing to edit the page yaml directly, then you can do this easily.
The f7-col component will place all it’s child components in a stacked column and you can place these columns next to each other.
This page yaml:
config:
label: clock cols
blocks: []
masonry:
- component: oh-masonry
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-clock-card
config: {}
- component: oh-clock-card
config: {}
- component: oh-clock-card
config: {}
- component: f7-col
slots:
default:
- component: oh-clock-card
config: {}
- component: oh-clock-card
config: {}
- component: f7-col
slots:
default:
- component: oh-clock-card
config: {}
grid: []
canvas: []
produces these columns:
Looks promising. Is this only possible with masonry and not with blocks?
As long as you are willing to work with the yaml editor, anywhere you can put a general component you can put a f7-col with its child components.
YAML is no problem, I use it all the time.
I’ve get the multi component working only in masonry. Tried all kinds of variations in block, but cant get it to display properly.
Does not display at all:
- component: f7-block
config: {}
slots:
default:
- component: f7-row
config: {}
slots:
default:
- component: f7-col
config: {}
slots:
default:
- component: oh-gauge-card
config:
title: Rc Channel 1
item: MQTT_Mavlink_RC_Channel_1
type: semicircle
- component: oh-gauge-card
config:
title: Rc Channel 2
item: MQTT_Mavlink_RC_Channel_2
type: semicircle
- component: oh-gauge-card
config:
title: Rc Channel 3
item: MQTT_Mavlink_RC_Channel_3
type: semicircle
Displays only the first component:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: f7-col
config: {}
slots:
default:
- component: oh-gauge-card
config:
title: Rc Channel 1
item: MQTT_Mavlink_RC_Channel_1
type: semicircle
- component: oh-gauge-card
config:
title: Rc Channel 2
item: MQTT_Mavlink_RC_Channel_2
type: semicircle
- component: oh-gauge-card
config:
title: Rc Channel 3
item: MQTT_Mavlink_RC_Channel_3
type: semicircle
Works:
masonry:
- component: oh-masonry
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-gauge-card
config:
title: Rc Channel 1
item: MQTT_Mavlink_RC_Channel_1
type: semicircle
- component: oh-gauge-card
config:
title: Rc Channel 2
item: MQTT_Mavlink_RC_Channel_2
type: semicircle
- component: oh-gauge-card
config:
title: Rc Channel 3
item: MQTT_Mavlink_RC_Channel_3
type: semicircle
- component: f7-col
slots:
default:
- component: oh-gauge-card
config:
title: Rc Channel 1
item: MQTT_Mavlink_RC_Channel_1
type: semicircle
- component: oh-gauge-card
config:
title: Rc Channel 2
item: MQTT_Mavlink_RC_Channel_2
type: semicircle
- component: oh-gauge-card
config:
title: Rc Channel 3
item: MQTT_Mavlink_RC_Channel_3
type: semicircle
But I prefer to use blocks as I have more control on sizing and different view ports.
I tried to do it with multiple nested f7-row within a oh-grid-col but only renders the first row. Im missing the basics in how I can work with this grid system. Pulling my hairs out 
In the case of the page blocks and the oh grid components, you need to separate each f7-col into individual oh-grid-columns as well:
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-clock-card
config: {}
- component: oh-clock-card
config: {}
- component: oh-clock-card
config: {}
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-clock-card
config: {}
- component: oh-clock-card
config: {}
- component: oh-grid-col
config: {}
slots:
default:
- component: f7-col
slots:
default:
- component: oh-clock-card
config: {}
To go a little bit further, when designing pages such as these, you’ll want to consider how they look on different screens too.
For example, in your screenshot:
You might want the two columns (separated by the blue line) to become a stack when the screen width is below a threshold, to do this you can use the properties on oh-grid-col illustrated here: https://www.openhab.org/docs/ui/layout-pages.html#designing-responsive-layout-pages.
For example the two oh-grid-col components would have width: 100 and medium: 50 properties to achieve that.
Then, while the page designer supports only one level of oh-grid-row / oh-grid-col, you can still reproduce the same behavior within a oh-grid-col in YAML with f7-row / f7-col (the properties are the same).
