Overview page layout

Setup, Configuration and Use Widgets
1

I want ask, if is possible change a overview page layout that my widgets are all together = No free space ? See my picture :

image
image1637×687 126 KB

It’s PC problem, on the cell phone it’s ok, widgets are in one column.

2

You can do this, but you will have to manually edit the page yaml.

The basic issue is that the default structure for the layout is a grid with only one component per grid cell. In fact, even if you try to manually add a second component to one of the grid cells:

- component: oh-grid-row
  config: {}
  slots:
    default:
      - component: oh-grid-col
        config: {}
        slots:
          default:
            - component: one-component
            - component: some-other-component

that won’t work. The oh-grid-col will only render its first child component (in the example above, one-component will be rendered but some-other-component will not.

Once you are editing the page yaml manually, then you have a wide range of options, but all of them are going to require at least a little bit of work. The easiest in this case is just to make an f7-col the child element of the grid column and then place as many child elements in the f7-col as you’d like.

- component: oh-grid-row
  config: {}
  slots:
    default:
      - component: oh-grid-col
        config: {}
        slots:
          default:
            - component: f7-col
              config: {}
              slots:
                default:
                  - component: one-component
                  - component: some-other-component
                  - component: a-third-component
1 Like
3

Working, thank you