Align height of "oh-grid-col" with other columns in the same "oh-grid-row"

[ErikDB (Erik)]

I’ve got a “layout” page with a row with two columns. I would like to have both columns have the same height. But on the laptop, the columns Verbruik are higher than the columns Schakelaar:

On the Android app, it’s the opposite:

Logically, I would think some kind of max(automatedheightcol1, automatedheightcol2) function would be a solution, but I have no idea what its syntax would be, where to put it, and where I could get the parameters from…

This is the code:

config:
  icon: fiets
  label: Fietsenladers tuinhuis
  order: 6
  sidebar: true
  visibleTo:
    - role:administrator
blocks:
  - component: oh-block
    config:
      title: Lader fiets CLN
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-toggle-card
                      config:
                        item: Lader_fiets_CLN_Power
                        title: Schakelaar
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        item: Lader_fiets_CLN_verbruik
                        title: Verbruik
  - component: oh-block
    config:
      title: Lader fiets DBE
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-toggle-card
                      config:
                        item: Lader_fiets_DBE_Power
                        title: Schakelaar
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-label-card
                      config:
                        item: Lader_fiets_DBE_verbruik
                        title: Verbruik
masonry: []
grid: []
canvas: []

Thanks to anyone who can shed some light on the YAML world (which I don’t find as “easy” as advertised :)).

[JustinG]

@ErikDB

the YAML world

This isn’t really a yaml issue, this is a css issue. OH just uses yaml as the configuration syntax. What you have to understand to make this work is where the sizes are coming from.

In this case both the grid columns and grid rows are sized to fit their content. So it’s the content that is driving that you see. In this case the two different cards are different sizes (and the toggle card changes size between the desktop and mobile versions because of the different forms of the toggle itself).

The only options that will work without any manual configuration of the yaml would be to use different widgets. The cards are designed to be flexible in height. The oh-cell family of widgets, however, are designed to be a consistent size so you could convert this layout to use cells. The only wrinkle there is that there is no such thing as an oh-toggle-cell because the oh-cell itself can be configured to toggle an item through its basic click action. There is an oh-label-cell however that easily replaces the label card.

If you want to dive into manually adding to the yaml configuration then you can keep the cards you just have to work with the card and column css. The style configuration for these components is what gets translated into the css directives for them, so for example, for the column you would change:

- component: oh-grid-col
  config: {}

into this:

- component: oh-grid-col
  config:
    style:
      css-property: property-value

By default the columns are the minimum height they need to be to fit their content (the cards) but you want the columns to actually stretch to fill the height of the space they are in. In this case, because of the configuration of their container all you need to do is add the align-self property and set it to stretch:

- component: oh-grid-col
  config:
    style:
      align-self: stretch

But that won’t stretch the cards, they will remain the same until you tell them to set their height to fill the column they are in. For this you need the height property. But you can’t just set the card height to 100% (try and see that it actually winds being too big). The problem is that the height does not take into account the fact that the cards have a margin around them. So, in this case you have to calculate the height of the card as 100% the height of the container minus twice the margin value:

- component: oh-label-card
  config:
    item: Lader_fiets_CLN_verbruik
    title: Verbruik
    style:
      height: calc(100% - 2 * var(--f7-card-margin-vertical))

There are many other different but related ways to solve this problem. In fact, if I were to do this myself, I would probably only have one grid column and put an f7-row in that column to control both cards at once. This would keep me from having to do the height calculation because both cards are now taking their identical margins into account:

- component: oh-grid-col
  config: {}
  slots:
    default:
      - component: f7-row
        config:
          style:
            align-items: stretch
          stylesheet: |
            .card {
              flex: 1 1 0px;
            }
        slots:
          default:
            - component: oh-toggle-card
              config:
                item: Lader_fiets_CLN_Power
                title: Schakelaar
            - component: oh-label-card
              config:
                item: Lader_fiets_CLN_verbruik
                title: Verbruik

[ErikDB (Erik)]

Wonderful! The ease with which you seem to spit out this knowledge is also impressive!

Thanks!