[OH3] Main UI - New „main_widget“ - development and testing [deprecated]

[JustinG]

@Nic0205

And is there a chance to make header and footer also relative height?

See my other answer here for an explanation if you are trying to use % and not getting the results you expect:

Issues with Layout of my widget

The way css calculates the height of an element, % only works as a unit if the element’s direct parent has a defined height. In this case the direct parent of the three rows is the f7-card-content: - component: f7-card-content slots: default: ... With no height styling it is just fitting its height to its content and this creates a loop if you try to use percent because the child asks the parent “what’s your height, I want to be 1/10th of that.” and the parent res…

Of course, the f7-card is just a div container with fancy card style, so it can use flexbox styling and if you set the flex parameter on each of the f7-blocks to the ratios that you want for the different sections you get relative scaling of the header and footer.

@Nic0205

How could we achieve that the card in sum has every time the same size - equal if there is a trend line or any other component?

You can set a height value in the style of the card (which, in fact you will want to do for relative sizing of the header and footer, anyway). What I would recommend is to use a css variable for it. You can set a variable in the main widget, and reference that variable in any of the other widgets inside the main widget just fine.