Hi!
i guess the title for this question makes no sense but i’m struggling to explain this in works…
here’s my main-ui page (responsive), with a row (yellow) and 3 columns. obviously the order is “Heizung” > Chart > “Stromverbrauch”
there’s no way i can get the “Stromverbrauch” Widget directly under the “Heizung” widget, is there?
If all your elements are in their own columns in the row then the only reason that “Stromverbrauch” is below “Heizung”, is that all three don’t fit across one level of the row and and the row is flexing the last element down to a second row. The first row will always have the height of the tallest element (the chart) so “Stromverbrauch” is as high as it’s going to get without position shenanigans (which will be very difficult to make appropriately responsive).
The solution is to re-think your structure. If you want “Heizung” and “Stromverbrauch” is a column next to the chart, then give the elements exactly that structure.
You have:
row
col
Heizung
col
Chart
col
Stromverbrauch
but what you want is
row
col
Heizung
Stromverbrauch
col
Chart
yeah, sorry, my bad:
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: 30
slots:
default:
- component: widget:Card_DW
config: {}
- component: oh-grid-col
config:
width: 70
slots:
default:
- component: widget:ChartCard
config: {}
- component: oh-grid-col
config:
width: 30
slots:
default:
- component: widget:Card_EnergyConsume
config: {}
like this?
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: 30
slots:
default:
- component: widget:Card_DW
config: {}
- component: widget:Card_EnergyConsume
config: {}
- component: oh-grid-col
config:
width: 70
slots:
default:
- component: widget:ChartCard
config: {}
this way the Card_EnergyConsume isn’t visible anymore…
Didn’t realize you were working with grids instead of f7 rows and cols. The grid system is really only designed around one single direct child per element. So, in that case you need to convince it that your two widgets are “one element” by making an f7-col the direct child of the grid-col and putting both the custom widgets in that f7-col.
- component: oh-grid-row
config: {}
slots:
default:
- component: oh-grid-col
config:
width: 30
slots:
default:
- component: f7-col
config: {}
slots:
default:
- component: widget:Card_DW
config: {}
- component: widget:Card_EnergyConsume
config: {}
- component: oh-grid-col
config:
width: 70
slots:
default:
- component: widget:ChartCard
config: {}
